import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { useDispatch } from "react-redux";
import { visorsGetPredictionStaticsDashboardService } from "../../services/get-visor-prediction-dashboard";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { VisorStaticsPredictionCharts } from "../visor-statics-prediction-charts/VisorStaticsPredictionCharts";
import { VisorStaticsPredictionHatchings } from "../visor-statics-prediction-hatchings/VisorStaticsPredictionHatchings";
import { IconButton, Tooltip } from "@mui/material";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import { motion, AnimatePresence } from "framer-motion"; // Import Framer Motion

export const VisorStaticsPrediction = () => {
  const dispatch = useDispatch();

  const [dashboardData, setDashboardData] = useState([]);
  const [showHatchings, setShowHatchings] = useState(false);

  useEffect(() => {
    dispatch(visorsGetPredictionStaticsDashboardService()).then((r) => {
      setDashboardData(r.payload.data);
    });
  }, [dispatch]);

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Grid container mt={2} mb={4} isDashboard xs={12}>
        <ResponsiveTable
          noPagination
          isDashboard
          operation={
            <Tooltip placement="top" title="نمایش جوجه ریزی های فعال">
              <IconButton
                color="primary"
                onClick={() => {
                  setShowHatchings(!showHatchings);
                }}
              >
                {showHatchings ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
              </IconButton>
            </Tooltip>
          }
          columns={[
            "جوجه ریزی های فعال",
            "حجم جوجه ریزی فعال",
            "میانگین سنی",
            "میانگین سن کشتار ",
            "میانگین وزن کشتار ",
            "حجم کشتار",
            "وزن کشتار",
            "تعداد بارها",
            "حجم بارها",
            "وزن بارها",
            "تخصیص بدون بار",
            "حجم تخصیص بدون بار",
            "وزن تخصیص بدون بار",
            "حجم مانده در سالن",
          ]}
          data={[
            [
              dashboardData?.hatchings?.toLocaleString(),
              dashboardData?.totalHatchingQuantity?.toLocaleString(),
              dashboardData?.aveNowAge?.toLocaleString(),
              dashboardData?.aveAge?.toLocaleString(),
              dashboardData?.aveWeight?.toLocaleString(),
              dashboardData?.totalQuantity?.toLocaleString(),
              dashboardData?.totalWeight?.toLocaleString(),
              dashboardData?.killHouseRequests?.toLocaleString(),
              dashboardData?.killHouseRequestsQuantity?.toLocaleString(),
              dashboardData?.provinceKillRequestsWeight?.toLocaleString(),
              dashboardData?.provinceKillRequests?.toLocaleString(),
              dashboardData?.provinceKillRequestsQuantity?.toLocaleString(),
              dashboardData?.provinceKillRequestsWeight?.toLocaleString(),
              dashboardData?.totalHatchingLeftOver?.toLocaleString(),
            ],
          ]}
          title={"خلاصه اطلاعات"}
        />
        <AnimatePresence>
          {showHatchings && (
            <motion.div
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.3 }}
              style={{ width: "100%" }}
            >
              <Grid
                container
                mt={2}
                justifyContent="center"
                alignItems="center"
              >
                <VisorStaticsPredictionHatchings />
              </Grid>
            </motion.div>
          )}
        </AnimatePresence>
      </Grid>

      <VisorStaticsPredictionCharts />
    </Grid>
  );
};
