import { Box, Chip, Divider } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import ChartBar from "../components/chart-bar/ChartBar";
import ChartLinear from "../components/chart-linear/ChartLenear";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { adminGetCharts } from "../features/admin/services/admin-get-charts";
import { LOADING_START, LOADING_END } from "../lib/redux/slices/appSlice";

import ChartPolarArea from "../components/chart-polar-area/ChartPolarArea";
import ChartRadar from "../components/chart-radar/ChartRadar";
import { AdminHatchingByPeriod } from "../features/admin/components/admin-hatching-by-period/AdminHatchingByPeriod";
import AdminStaticInfoInBox from "../features/admin/components/admin-static-info-in-box/AdminStaticInfoInBox";
import { formatJustDate } from "../utils/formatTime";

const AdminStatics = () => {
  const [ageChickenData, setAgeChickenData] = useState({ datasets: [] });
  const [chickenPriceData, setChickenPriceData] = useState({ datasets: [] });
  const [polarData, setPolarData] = useState({ datasets: [] });
  const [radarData, setRadarData] = useState({ datasets: [] });

  const dispatch = useDispatch();
  const { statics } = useSelector((state) => state.adminSlice);

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(adminGetCharts()).then(() => {
      dispatch(LOADING_END());
    });
  }, []);

  const [chickenPriceInfo, setChickenPriceInfo] = useState();
  const [chickenlist, setChickenList] = useState();
  const [infoData, setInfoData] = useState();
  useEffect(() => {
    statics?.map((item) => {
      if (Object.keys(item)[0] === "poultryHatching") {
        setChickenList(Object.values(item)[0]);
      } else if (Object.keys(item)[0] === "box") {
        setInfoData(Object.values(item)[0]);
      } else if (Object.keys(item)[0] === "priceList") {
        setChickenPriceInfo(Object.values(item)[0]);
      }
      return null;
    });
  }, [statics]);

  useEffect(() => {
    setAgeChickenData({
      labels: chickenlist?.map((data) => data?.type?.replace("_", "-")),
      datasets: [
        {
          label: "تعداد",
          backgroundColor: ["rgba(33, 72, 214, 0.7)"],
          data: chickenlist?.map((data) => data?.quantity),
          borderRadius: 5,
        },
        {
          label: "تلفات",
          backgroundColor: ["rgba(100, 130, 160, 0.7)"],
          data: chickenlist?.map((data) => data?.losses),
          borderRadius: 5,
        },
        {
          type: "line",
          label: "مقدار استاندارد",
          backgroundColor: ["rgba(0, 120, 10, 0.7)"],
          data: [
            2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500,
            2500,
          ],
        },
      ],
    });
    setChickenPriceData({
      labels: chickenPriceInfo?.map((data) => formatJustDate(data?.date)),
      datasets: [
        {
          label: "قیمت",
          backgroundColor: ["rgba(33, 72, 214, 0.7)"],
          data: chickenPriceInfo?.map((data) => data?.price),
          borderRadius: 5,
        },
      ],
    });
    setPolarData({
      labels: chickenlist?.map((data) => data?.type?.replace("_", "-")),
      datasets: [
        {
          backgroundColor: [
            "rgba(158, 0, 87, 0.5)",
            "rgba(255, 65, 249, 0.5)",
            "rgba(130, 150, 214, 0.5)",
            "rgba(255, 135, 155, 0.5)",
            "rgba(33, 189, 155, 0.5)",
            "rgba(33, 46, 214, 0.5)",
          ],
          label: "تعداد",
          data: chickenlist?.map((data) => data?.quantity),
        },
        {
          backgroundColor: [
            "rgba(255, 0, 87, 0.5)",
            "rgba(255, 0, 249, 0.5)",
            "rgba(33, 72, 214, 0.5)",
            "rgba(255, 135, 155, 0.5)",
            "rgba(33, 200, 155, 0.5)",
            "rgba(33, 72, 214, 0.5)",
          ],
          label: "تلفات",
          data: chickenlist?.map((data) => data?.losses),
        },
      ],
    });

    setRadarData({
      labels: chickenlist?.map((data) => data?.type?.replace("_", "-")),

      datasets: [
        {
          label: "جوجه",
          data: [65, 59, 90, 81, 56, 55, 40, 56, 70, 90, 91, 88],
          fill: true,
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          borderColor: "rgb(255, 99, 132)",
          pointBackgroundColor: "rgb(255, 99, 132)",
          pointBorderColor: "#fff",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: "rgb(255, 99, 132)",
        },
        {
          label: "تلفات",
          data: [69, 75, 84, 60, 96, 95, 90, 80, 68, 75, 60, 88],
          fill: true,
          backgroundColor: "rgba(54, 162, 235, 0.2)",
          borderColor: "rgb(54, 162, 235)",
          pointBackgroundColor: "rgb(54, 162, 235)",
          pointBorderColor: "#fff",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: "rgb(54, 162, 235)",
        },
      ],
    });
  }, [statics, chickenlist]);

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
        my={SPACING.MEDIUM}
      >
        <Grid xs={12} sm={12} md={12} lg={12} container justifyContent="center">
          <Grid xs={10} sm={10} md={10} lg={6}>
            <Divider mb={SPACING.SMALL}>
              <Chip
                size="small"
                label="گزارش موجودی مرغ بر اساس بازه سنی (نمودار میله ای)"
              />
            </Divider>
            <ChartBar chartData={ageChickenData} />
          </Grid>
          <Grid xs={10} sm={10} md={10} lg={6}>
            <Divider mb={SPACING.SMALL}>
              <Chip
                size="small"
                label="گزارش تغییرات قیمت مرغ زنده (نمودار خطی)"
              />
            </Divider>
            <ChartLinear chartData={chickenPriceData} />
          </Grid>
          <AdminStaticInfoInBox infoData={infoData} />

          <Grid mt={SPACING.MEDIUM} xs={10} sm={10} md={10} lg={6}>
            <Divider mb={SPACING.SMALL}>
              <Chip
                size="small"
                label="گزارش موجودی مرغ بر اساس بازه سنی (نمودار قطبی)"
              />
            </Divider>
            <ChartPolarArea chartData={polarData} />
          </Grid>
          <Grid mt={SPACING.MEDIUM} xs={10} sm={10} md={10} lg={6}>
            <Divider mb={SPACING.SMALL}>
              <Chip
                size="small"
                label="گزارش موجودی مرغ بر اساس بازه سنی (نمودار راداری)"
              />
            </Divider>
            <ChartRadar chartData={radarData} />
          </Grid>
          <AdminHatchingByPeriod
            statics={statics}
            ageChickenData={ageChickenData}
          />
        </Grid>
      </Grid>
    </Box>
  );
};

export default AdminStatics;
