import React, { useEffect, useState } from 'react';
import ReactApexChart from "react-apexcharts";
import PropTypes from "prop-types";

const Chart = ReactApexChart.default || ReactApexChart;

export default function BarChart({ data, selectedValue, selectedValue3 }) {
  const [xyData, setXYData] = useState([]) 
  useEffect(() => {
    if (!data || !Array.isArray(data) || !data[0]?.Results) {
      return;
    }
    const results = data[0].Results;
    const barChartData = []
    if (selectedValue === 'Sessions') {
      switch (selectedValue3) {
        case "Active":
          results.forEach((item) => {
            barChartData.push({"x": item.LoginDate, "y": item.ActiveCount});
          });
          break;
        case "Idle":
          results.forEach((item) => {
            barChartData.push({"x": item.LoginDate, "y": item.IdleCount});
          });
          break;
        case "Sleep":
          results.forEach((item) => {
            barChartData.push({"x": item.LoginDate, "y": item.SleepCount});
          });
          break;
        case "Log In":
          results.forEach((item) => {
            barChartData.push({"x": item.LogInDate, "y": item.LogInCount});
          });
          break;
        case "Log Out":
          results.forEach((item) => {
            barChartData.push({"x": item.LogInDate, "y": item.LogOutCount});
          });
          break;
        default:
          results.forEach((item) => {
            barChartData.push({"x": item.LoginDate, "y": item.TotalCountActivity});
          });
      }
    } else if (selectedValue === 'Calls') {
      results.forEach((item) => {
        barChartData.push({"x": item.StartedOn, "y": item.CallsCount});
      });
    } else {
      results.forEach((item) => {
        barChartData.push({"x": item.StartedOn, "y": item.ApplicationCount});
      });
    }
    setXYData(barChartData)
  }, [data, selectedValue, selectedValue3]);

  if (!data || data?.length === 0 || !data[0]?.Results) {
    return <div>No Data found for selcted filters</div>
  }

  const series = [
    {
      name: "Total Count",
      data: xyData,
    },
  ];

  const chartOptions = {
    chart: {
      type: "bar",
      zoom: { enabled: true },
      toolbar: {
        show: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    xaxis: {
      type: "category",
      tickPlacement: 'on',
      axisTicks: {
        show: true
      },
      labels: {
        show: true,
        hideOverlappingLabels: true,
        showDuplicates: true,
        trim: false,
        style: {
          fontSize: '12px',
        },
        formatter: (val) => {
          const date = new Date(val);
          const dateOptions = { month: "short", day: "numeric" };
          return date.toLocaleDateString("en-US", dateOptions);
        },
      },
    },
    tooltip: {
      x: {
        format: "MMMM dd",
      },
    },
    responsive: [
      {
        breakpoint: 768,
        options: {
          plotOptions: {
            bar: {
              horizontal: true,
            },
          },
        },
      },
    ],
  };

  return (
    <div style={{ height: "calc(100vh - 160px)", width: "100%", background: "#fff" }}>
      <Chart options={chartOptions} series={series} type="bar" height="100%" />
    </div>
  );
};

BarChart.propTypes = {
  data: PropTypes.object.isRequired,
  selectedValue: PropTypes.string.isRequired,
  selectedValue3: PropTypes.string.isRequired,
};
