import { Box } from "@mui/system";
import { Grid } from "../components/grid/Grid";
import { FarmsStats } from "../features/stats/FarmsStats";
import { UsersStats } from "../features/stats/UserStats";
import { HatchingStock } from "../features/stats/HatchingStock";
import { HatchingStockAge } from "../features/stats/HatchingStockAge";
import { HatchingStockCity } from "../features/stats/HatchingStockCity";
import { HatchingStockCityRemain } from "../features/stats/HatchingStockCityRemain";
import { KillRequestsStats } from "../features/stats/KillRequestsStats";
import { NumberOfKills } from "../features/stats/NumberOfKills";
import { SPACING } from "../data/spacing";
import { ChickenPriceStats } from "../features/stats/ChickenPriceStats";
import { NumberOfKillsByWeight } from "../features/stats/NumberOfKillsByWeight";
import { KillFilesStats } from "../features/stats/KillFilesStats";
import { KillProcessKillRequestStats } from "../features/stats/KillProcessKillRequestStats";
import { KillProcessAllocationStats } from "../features/stats/KillProcessAllocationStats";
import { KillProcessVetFarmStats } from "../features/stats/KillProcessVetFarmStats";
import { KillProcessKillhouseVetStats } from "../features/stats/KillProcessKillhouseVetStats";
import { HatchingRemainPredictionStats } from "../features/stats/HatchingRemainPredictionStats";
import {
  Button,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  Typography,
} from "@mui/material";
import { format } from "date-fns-jalali";
import { useScreenshot } from "use-react-screenshot";
import { createRef, useEffect } from "react";
import DownloadIcon from "@mui/icons-material/Download";
import { KillProcessStats } from "../features/province/components/kill-process-stats/KillProcessStats";
import { useFormik } from "formik";
import { getListOfProvinces } from "../utils/getListOfProvinces";
import { getRoleFromUrl } from "../utils/getRoleFromUrl";
import { DistributeOfCarcasses } from "../features/stats/DistributeOfCarcasses";
import { useSelector } from "react-redux";

const AdminStatics = () => {
  const ref = createRef(null);
  const [image, takeScreenshot] = useScreenshot();
  const getImage = () => takeScreenshot(ref.current);
  const userPath = useSelector((item) => item.userSlice.userPath);

  useEffect(() => {
    if (image) {
      const downloadLink = document.createElement("a");
      downloadLink.href = image;
      downloadLink.setAttribute("download", "report.png");
      downloadLink.click();
    }
  }, [image]);

  const formik = useFormik({
    initialValues: {
      province: userPath,
    },
  });

  useEffect(() => {
    formik.validateForm();
  }, []);

  const isMobile = window.innerWidth <= 600;

  return (
    <Box
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginTop: "10px",
        flexDirection: "column",
      }}
    >
      <Grid
        style={{ marginBottom: "10px" }}
        container
        xs={10}
        mt={SPACING.SMALL}
        justifyContent="flex-end"
      >
        <Grid xs={6} lg={2} md={4} sm={2}>
          {(getRoleFromUrl() === "Observatory" ||
            getRoleFromUrl() === "AdminX") && (
            <FormControl>
              <InputLabel id="demo-simple-select-label">
                انتخاب استان
              </InputLabel>
              <Select
                size="small"
                displayEmpty
                labelId="demo-simple-select-label"
                id="province"
                value={formik.values.province}
                error={
                  formik.touched.province
                    ? Boolean(formik.errors.province)
                    : null
                }
                onChange={(e) => {
                  formik.setFieldValue("province", e.target.value);
                }}
                onBlur={formik.handleBlur}
              >
                {getListOfProvinces().map((item) => {
                  return (
                    <MenuItem key={item.link} value={item.link}>
                      {item.name}
                    </MenuItem>
                  );
                })}
              </Select>
              <FormHelperText>
                {formik.touched.province && Boolean(formik.errors.province)
                  ? formik.errors.province
                  : null}
              </FormHelperText>
            </FormControl>
          )}
        </Grid>

        <Grid xs={4} lg={2} md={4} sm={2}>
          <Button startIcon={<DownloadIcon />} onClick={getImage}>
            دانلود آمار
          </Button>
        </Grid>
      </Grid>
      {}
      {}
      {}
      <Box
        ref={ref}
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginTop: "10px",
          paddingBottom: "50px",
          flexDirection: "column",
        }}
      >
        <Box
          sx={{ boxShadow: 4, borderRadius: "20px", padding: "20px" }}
          width="80%"
          mt={SPACING.SMALL}
          mb={SPACING.SMALL}
        >
          <Grid container xs={12} justifyContent="space-between">
            <Grid xs={12} md={12} sm={12} lg={3}>
              <KillRequestsStats province={formik.values.province} />
            </Grid>
            <Grid xs={12} md={12} sm={12} lg={2}>
              <KillFilesStats province={formik.values.province} />
            </Grid>
            <Grid xs={12} md={12} sm={12} lg={3}>
              <FarmsStats province={formik.values.province} />
            </Grid>
            <Grid xs={12} md={12} sm={12} lg={2}>
              <UsersStats province={formik.values.province} />
            </Grid>
            <Grid xs={12} md={12} sm={12} lg={2}>
              <ChickenPriceStats province={formik.values.province} />
            </Grid>
          </Grid>
        </Box>

        <Box
          style={{
            width: "80%",
            display: "flex",
            justifyContent: "space-between",
            marginTop: "40px",
            flexDirection: "column",
            alignItems: "start",
          }}
        >
          <Grid
            container
            width="100%"
            justifyContent="space-between"
            alignItems="center"
          >
            <Typography>
              روند کشتار امروز مورخ {format(new Date(), "yyyy/MM/dd")}
            </Typography>
            <KillProcessStats province={formik.values.province} />
          </Grid>
          <Box
            mb={SPACING.MEDIUM}
            gap={SPACING.TINY}
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: "20px",
              width: "100%",
            }}
          >
            <KillProcessKillRequestStats province={formik.values.province} />
            <KillProcessAllocationStats province={formik.values.province} />
            <KillProcessVetFarmStats province={formik.values.province} />
            <KillProcessKillhouseVetStats province={formik.values.province} />
            <DistributeOfCarcasses province={formik.values.province} />
          </Box>
        </Box>

        <Box
          style={{
            width: isMobile ? "40%" : "80%",
            display: "flex",
            justifyContent: "space-between",
            flexDirection: "column",
            gap: SPACING.MEDIUM,
          }}
        >
          {}
          <HatchingStock province={formik.values.province} />

          <br />
          {}
          {}
          <HatchingStockAge province={formik.values.province} />
          {}
        </Box>
        <Box
          style={{
            width: "80%",
            display: "flex",
            justifyContent: "space-between",
            marginTop: "40px",
          }}
        >
          <Box style={{ width: "48%" }}>
            <HatchingStockCity province={formik.values.province} />
          </Box>
          <Box style={{ width: "48%" }}>
            <HatchingStockCityRemain province={formik.values.province} />
          </Box>
        </Box>
        <Box
          style={{
            width: "80%",
            display: "flex",
            justifyContent: "space-between",
            marginTop: "40px",
          }}
        >
          <Box style={{ width: "48%" }}>
            <NumberOfKills province={formik.values.province} />
          </Box>
          <Box style={{ width: "48%" }}>
            <NumberOfKillsByWeight province={formik.values.province} />
          </Box>
        </Box>

        <Box
          style={{
            width: "80%",
            display: "flex",
            justifyContent: "space-between",
            marginTop: "40px",
          }}
        >
          <HatchingRemainPredictionStats province={formik.values.province} />
        </Box>
      </Box>
    </Box>
  );
};

export default AdminStatics;
