import React, { useEffect, useState } from "react";
import { visorsGetNationalInfoService } from "../../../services/get-visor-national-info";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../../components/grid/Grid";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
} from "chart.js";
import { AdvancedChart } from "../../../../../components/advanced-chart/AdvancedChart";

ChartJS.register(
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement
);

export const VisorStaticsNationalInfoCountry = ({
  selectedProvince,
  selectedDate1,
  selectedDate2,
  withDate,
}) => {
  const dispatch = useDispatch();

  const [chartsData, setChartsData] = useState({});

  useEffect(() => {
    dispatch(
      visorsGetNationalInfoService({
        selectedProvince,
        selectedDate1,
        selectedDate2,
        withDate,
        type: "province",
      })
    ).then((r) => {
      setChartsData(r.payload.data);
    });
  }, [dispatch, selectedProvince, selectedDate1, selectedDate2, withDate]);

  const getBreedByProvince = (originalData, type) => {
    if (originalData) {
      if (type === "sum-hatching") {
        const data = originalData?.map((item) => item?.chickSum || 0);

        return [
          {
            name: "حجم جوجه ریزی",
            data: data,
          },
        ];
      } else if (type === "average-age") {
        const data = originalData?.map((item) => item?.averageAge || 0);

        return [
          {
            name: "میانگین سنی",
            data: data,
          },
        ];
      } else if (type === "evacuation") {
        const data = originalData?.map((item) => item?.evacuationHatching || 0);

        return [
          {
            name: "درصد تلفات",
            data: data,
          },
        ];
      } else if (type === "leftover") {
        const data = originalData?.map((item) => item?.leftOver || 0);

        return [
          {
            name: "باقیمانده",
            data: data,
          },
        ];
      } else if (type === "sum-transport") {
        const data = originalData?.map((item) => item?.goodAmount || 0);

        return [
          {
            name: "حجم کشتار",
            data: data,
          },
        ];
      }
    } else {
      return null;
    }
  };

  return (
    <Grid
      xs={12}
      container
      justifyContent="center"
      alignItems="center"
      spacing={4}
      style={{ width: "100%" }}
    >
      {chartsData && (
        <>
          <Grid
            item
            xs={12}
            justifyContent="center"
            alignItems="center"
            height="700px"
          >
            <AdvancedChart
              title={"حجم جوجه ریزی"}
              type={"bar"}
              group
              seperator={chartsData?.provinceHatchingSum?.map(
                (province) => province.ProvinceName
              )}
              info={getBreedByProvince(
                chartsData?.provinceHatchingSum,
                "sum-hatching"
              )}
            />
          </Grid>

          <Grid
            item
            xs={6}
            justifyContent="center"
            alignItems="center"
            height="700px"
          >
            <AdvancedChart
              title={"میانگین سنی"}
              type={"bar"}
              group
              seperator={chartsData?.provinceNameAverageAge?.map(
                (province) => province.ProvinceName
              )}
              info={getBreedByProvince(
                chartsData?.provinceNameAverageAge,
                "average-age"
              )}
            />
          </Grid>

          <Grid
            item
            xs={6}
            justifyContent="center"
            alignItems="center"
            height="700px"
          >
            <AdvancedChart
              title={"درصد تلفات هر استان"}
              type={"bar"}
              group
              seperator={chartsData?.provinceEvacuationHatchingPercent?.map(
                (province) => province.ProvinceName
              )}
              info={getBreedByProvince(
                chartsData?.provinceEvacuationHatchingPercent,
                "evacuation"
              )}
            />
          </Grid>

          <Grid
            item
            xs={12}
            justifyContent="center"
            alignItems="center"
            height="700px"
          >
            <AdvancedChart
              title={"حجم باقیمانده"}
              type={"bar"}
              group
              seperator={chartsData?.provinceNameLeftover?.map(
                (province) => province.ProvinceName
              )}
              info={getBreedByProvince(
                chartsData?.provinceNameLeftover,
                "leftover"
              )}
            />
          </Grid>

          <Grid
            item
            xs={12}
            justifyContent="center"
            alignItems="center"
            height="700px"
          >
            <AdvancedChart
              title={"مجموع حجم کشتار"}
              type={"line"}
              group
              seperator={chartsData?.provinceSumTransporting?.map(
                (province) => province.ProvinceName
              )}
              info={getBreedByProvince(
                chartsData?.provinceSumTransporting,
                "sum-transport"
              )}
            />
          </Grid>
        </>
      )}
    </Grid>
  );
};
