import { Card, IconButton, TextField, Typography } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import PlagiarismIcon from "@mui/icons-material/Plagiarism";
import { useNavigate } from "react-router-dom";
import { ROUTE_SLAUGHTER_FILE } from "../../../../routes/routes";
import { formatJustDate } from "../../../../utils/formatTime";
import { DatePicker } from "@mui/x-date-pickers";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import moment from "moment/moment";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch, useSelector } from "react-redux";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { avicultureGetRequests } from "../../../aviculture/services/aviculture-requests";

export const SlaughterArchivedRequests = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [dataTable, setDataTable] = useState([]);
  const { avicultureRequests } = useSelector((state) => state.avicultureSlice);

  const [, , selectedDate1, setSelectedDate1, selectedDate2, setSelectedDate2] =
    useContext(AppContext);

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

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

  useEffect(() => {
    const filteredData = avicultureRequests?.filter(
      (item, i) => item.inspector != null
    );
    const d = filteredData?.map((item, i) => {
      return [
        i + 1,
        item.orderCode,
        formatJustDate(item?.createDate),
        formatJustDate(item?.sendDate),
        item?.process?.poultry?.poultryName,
        item?.process?.poultry?.poultryMobile,
        item?.process?.poultry?.poultryCity,
        item?.process?.poultry?.poultryProvince,
        item?.process?.poultry?.age,
        item?.process?.poultry?.poultryQuantity,
        <IconButton
          key={i}
          aria-label="delete"
          color="primary"
          onClick={() =>
            navigate(
              ROUTE_SLAUGHTER_FILE + item?.process?.poultry?.poultryRequestId
            )
          }
        >
          <PlagiarismIcon />
        </IconButton>,
      ];
    });

    setDataTable(d);
  }, [avicultureRequests]);

  const [tableDataCol] = useState([
    "ردیف",
    "کد سفارش",
    "تاریخ ثبت درخواست",
    "تاریخ درخواست",
    "مرغدار",
    "تلفن مرغدار",
    "شهر",
    "استان",
    "سن مرغ",
    "تعداد",
    "مشاهده",
  ]);
  return (
    <Card>
      <AdvancedTable
        name={
          <Grid container alignItems="center" gap={SPACING.SMALL}>
            <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>
        }
        expandable
        columns={tableDataCol}
        data={dataTable}
      />
    </Card>
  );
};
