import React, { useContext, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import {
  Autocomplete,
  Box,
  Checkbox,
  Tab,
  Tabs,
  TextField,
  Typography,
} from "@mui/material";
import ShowChartIcon from "@mui/icons-material/ShowChart";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { VisorStaticsNationalInfoCountry } from "./parts/VisorStaticsNationalInfoCountry";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import { getSamasatProvinces } from "../../../../utils/getSamasatProvinces";
import { AppContext } from "../../../../contexts/AppContext";
import ToggleOffOutlinedIcon from "@mui/icons-material/ToggleOffOutlined";
import ToggleOnIcon from "@mui/icons-material/ToggleOn";
import { VisorStaticsNationalInfoBreeds } from "./parts/VisorStaticsNationalInfoBreeds";

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

export const VisorStaticsNationalInfo = () => {
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);
  const [value, setValue] = useState("breed");
  const [withDate, setWithDate] = useState(false);
  const [selectedProvince, setSelectedProvince] = useState("");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const getProvinceList = () => {
    return [{ name: "همه" }, ...getSamasatProvinces()];
  };

  const boxItems = [
    {
      title: "لورم ایپسوم",
      icon: <ShowChartIcon />,
      value: 2000,
    },
    {
      title: "لورم ایپسوم",
      icon: <ShowChartIcon />,
      value: 2000,
    },
    {
      title: "لورم ایپسوم",
      icon: <ShowChartIcon />,
      value: 2000,
    },
    {
      title: "لورم ایپسوم",
      icon: <ShowChartIcon />,
      value: 2000,
    },
  ];

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center" mb={4}>
      <Grid container xs={12} justifyContent="center" alignItems="center">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
        >
          <Tab value="breed" label="نژاد" />
          <Tab value="national" label="کشور" />
          <Tab disabled value="killing" label="کشتار" />
          <Tab disabled value="age" label="سن" />
        </Tabs>
      </Grid>

      <Grid
        container
        xs={12}
        justifyContent="start"
        alignItems="center"
        gap={2}
        mt={2}
      >
        <Grid
          container
          gap={1}
          style={{
            borderStyle: "solid",
            borderWidth: "1px",
            padding: "10px",
            borderRadius: "15px",
            borderColor: "#E6F1FD",
            justifyContent: "left",
          }}
          alignItems="center"
        >
          <Grid minWidth={210}>
            <Autocomplete
              size="small"
              disablePortal
              id="hatching"
              options={getProvinceList().map((i) => {
                return {
                  label: i.name,
                };
              })}
              onChange={(event, value) => {
                if (value.label !== "همه") {
                  setSelectedProvince(value.label);
                } else {
                  setSelectedProvince("");
                }
              }}
              renderInput={(params) => (
                <TextField {...params} label="انتخاب استان" />
              )}
            />
          </Grid>

          <Grid container justifyContent="center" alignItems="center">
            <Checkbox
              icon={<ToggleOffOutlinedIcon />}
              checkedIcon={<ToggleOnIcon />}
              checked={withDate}
              onChange={() => setWithDate(!withDate)}
              color="primary"
              size="large"
            />
          </Grid>
          <Grid>
            <DatePicker
              disabled={!withDate}
              label="از تاریخ"
              id="date"
              renderInput={(params) => (
                <TextField
                  size="small"
                  style={{ width: "160px" }}
                  {...params}
                />
              )}
              value={selectedDate1}
              onChange={(e) => {
                setSelectedDate1(moment(e).format("YYYY-MM-DD"));
              }}
            />
          </Grid>
          <Grid>
            <DatePicker
              disabled={!withDate}
              label="تا تاریخ"
              id="date"
              renderInput={(params) => (
                <TextField
                  size="small"
                  style={{ width: "160px" }}
                  {...params}
                />
              )}
              value={selectedDate2}
              onChange={(e) => {
                setSelectedDate2(moment(e).format("YYYY-MM-DD"));
              }}
            />
          </Grid>
        </Grid>
      </Grid>

      {true === false && (
        <Grid
          container
          justifyContent="center"
          alignItems="center"
          mt={4}
          style={{ width: "100%" }}
          spacing={4}
          xs={12}
          mb={4}
        >
          {boxItems?.map((item, i) => (
            <Grid
              item
              key={i}
              xs={12}
              sm={6}
              md={3}
              justifyContent="center"
              alignItems="center"
            >
              <Box
                sx={{
                  width: "100%",
                  height: "120px",
                  background: i % 2 === 0 ? "#E6F1FD" : "#E6FAF5",
                  borderRadius: "16px",
                }}
              >
                <Grid container p="24px">
                  <Typography variant="body1">{item?.title}</Typography>
                  <Grid
                    container
                    xs={10}
                    mt={1}
                    gap={2}
                    justifyContent="end"
                    alignItems="center"
                  >
                    <Grid item>{item.icon}</Grid>
                    <Grid item>
                      <Typography sx={{ fontSize: "24px" }} fontWeight="800">
                        {item?.value}
                      </Typography>
                    </Grid>
                  </Grid>
                </Grid>
              </Box>
            </Grid>
          ))}
        </Grid>
      )}

      {value === "breed" && (
        <VisorStaticsNationalInfoBreeds
          selectedProvince={selectedProvince}
          selectedDate1={selectedDate1}
          selectedDate2={selectedDate2}
          withDate={withDate}
        />
      )}

      {value === "national" && (
        <VisorStaticsNationalInfoCountry
          selectedProvince={selectedProvince}
          selectedDate1={selectedDate1}
          selectedDate2={selectedDate2}
          withDate={withDate}
        />
      )}
    </Grid>
  );
};
