import { IconButton, TextField, Typography } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment/moment";
import { useContext, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { SPACING } from "../../../../data/spacing";
import { provinceGetArchiveAutoAllocationsService } from "../../services/province-get-archive-auto-allocations";
import PlagiarismIcon from "@mui/icons-material/Plagiarism";
import { ProvinceAutoAllocatedView } from "../province-auto-allocated-view/ProvinceAutoAllocatedView";
import { formatJustDate } from "../../../../utils/formatTime";

export const ProvinceAutoAllocationArchive = () => {
  const dispatch = useDispatch();
  const [dataTable, setDataTable] = useState([]);
  const [isSingleView, setIsSingleView] = useState();
  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);

  useEffect(() => {
    const currentDate = moment(new Date()).format("YYYY-MM-DD");
    setSelectedDate1(currentDate);
    setSelectedDate2(currentDate);
  }, []);

  const { provinceGetArchiveAutoAllocations } = useSelector(
    (state) => state.provinceSlice
  );

  useEffect(() => {
    dispatch(
      provinceGetArchiveAutoAllocationsService({ selectedDate1, selectedDate2 })
    );
  }, [selectedDate1, selectedDate2]);

  useEffect(() => {
    const d = provinceGetArchiveAutoAllocations?.map((item, i) => {
      return [
        i + 1,
        item.allocationOrderCode,
        formatJustDate(item.allocationDate),
        item.totalQuantity.toLocaleString(),
        item.allocatedQuantity.toLocaleString(),
        item.numberOfPoultry.toLocaleString(),
        item.numberOfKillHouse.toLocaleString(),
        <IconButton
          color="primary"
          key={i}
          onClick={() => {
            setIsSingleView(item);
          }}
        >
          <PlagiarismIcon />
        </IconButton>,
      ];
    });
    setDataTable(d);
  }, [provinceGetArchiveAutoAllocations]);

  return (
    <Grid mt={SPACING.SMALL} xs={12} px={2}>
      {!isSingleView && (
        <>
          <Grid container alignItems="center" gap={SPACING.SMALL} mb={2}>
            <Grid>
              <Typography>بایگانی تخصیصات خودکار</Typography>
            </Grid>
            <Grid>
              <DatePicker
                label="از تاریخ"
                id="date"
                renderInput={(params) => (
                  <TextField style={{ width: "160px" }} {...params} />
                )}
                value={selectedDate1}
                onChange={(e) => {
                  setSelectedDate1(moment(e).format("YYYY-MM-DD"));
                }}
              />
            </Grid>
            <Grid>
              <DatePicker
                label="تا تاریخ"
                id="date"
                renderInput={(params) => (
                  <TextField style={{ width: "160px" }} {...params} />
                )}
                value={selectedDate2}
                onChange={(e) => {
                  setSelectedDate2(moment(e).format("YYYY-MM-DD"));
                }}
              />
            </Grid>
          </Grid>
          <ResponsiveTable
            title="بایگانی تخصیصات خودکار"
            columns={[
              "ردیف",
              "کد تخصیص خودکار",
              "تاریخ تخصیص",
              "تعداد درخواست کشتار",
              "تعداد تخصیصی",
              "تعداد مرغدار",
              "تعداد کشتارگاه",
              "مشاهده",
            ]}
            data={dataTable}
          />
        </>
      )}

      {isSingleView && (
        <Grid
          container
          direction="column"
          alignItems="start"
          gap={SPACING.SMALL}
        >
          <ProvinceAutoAllocatedView
            dataTable={isSingleView.allocationsList}
            item={isSingleView}
            setIsSingleView={setIsSingleView}
          />
        </Grid>
      )}
    </Grid>
  );
};
