import { TextField } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import PlagiarismIcon from "@mui/icons-material/Plagiarism";
import { useNavigate } from "react-router-dom";
import { ROUTE_PROVINCE_FINANCIAL_FILE } from "../../../../routes/routes";
import IconButton from "@mui/material/IconButton";
import { useDispatch, useSelector } from "react-redux";
import { provinceFinancialGetPendingRequestsService } from "../../services/province-financial-get-pending-requests";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { FinancialCheckRequestOperation } from "../../../file/components/financial-check-request-operation/FinancialCheckRequestOperation";
import EditIcon from "@mui/icons-material/Edit";
import { Grid } from "../../../../components/grid/Grid";
import { ProvinceFinancialCheckRequestInfo } from "../province-financial-check-request-info/ProvinceFinancialCheckRequestInfo";
import { formatJustDate } from "../../../../utils/formatTime";
import { SPACING } from "../../../../data/spacing";
import moment from "moment/moment";
import { AppContext } from "../../../../contexts/AppContext";
import { DatePicker } from "@mui/x-date-pickers";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";

export const ProvinceFinancialPendingRequests = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { provinceFinancialGetPendingRequests } = useSelector(
    (state) => state.provinceFinancialSlice
  );
  const [dataTable, setDataTable] = useState([]);

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

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

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

  useEffect(() => {
    const d = provinceFinancialGetPendingRequests?.map((item, i) => {
      return [
        i + 1,
        item?.barCode,
        formatJustDate(item?.sendDate),
        `${item?.fullName} (${item?.mobile})`,
        item?.unitName,
        `${item?.killHouseName} (${item.killHouseMobile})`,
        `${item?.killPlace}`,
        `${item?.province}/${item?.city}`,
        item?.age,
        item?.acceptedRealQuantity?.toLocaleString(),
        item?.killHouseNetWeight?.toLocaleString() + " کیلوگرم",
        <IconButton
          key={i}
          color="primary"
          onClick={() => {
            dispatch(
              DRAWER({
                title: "انجام عملیات تایید / رد درخواست",
                // right: !(window.innerWidth <= 600),
                top: !(window.innerWidth <= 600),
                bottom: window.innerWidth <= 600,
                content: (
                  <Grid contianer>
                    <ProvinceFinancialCheckRequestInfo data={item} />
                    <FinancialCheckRequestOperation item={item} />
                  </Grid>
                ),
              })
            );
          }}
        >
          <EditIcon />
        </IconButton>,
        <IconButton
          key={i}
          aria-label="delete"
          color="primary"
          onClick={() => {
            navigate(
              ROUTE_PROVINCE_FINANCIAL_FILE +
                item?.poultryRequest?.process?.poultry?.poultryRequestId
            );
          }}
        >
          <PlagiarismIcon />
        </IconButton>,
      ];
    });
    setDataTable(d || []);
  }, [provinceFinancialGetPendingRequests]);

  const [tableDataCol] = useState([
    "ردیف",
    "کد بار",
    "تاریخ کشتار",
    "مرغدار",
    "نام مرغداری",
    "خریدار",
    "محل کشتار",
    "استان/شهر",
    "سن مرغ",
    "تعداد",
    "وزن بار",
    "عملیات",
    "مشاهده",
  ]);
  return (
    <Grid container direction="column" gap={SPACING.SMALL}>
      <Grid container alignItems="center" gap={SPACING.SMALL}>
        <Grid style={{ width: 160 }}>
          <DatePicker
            label="از تاریخ"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate1}
            onChange={(e) => {
              setSelectedDate1(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
        <Grid style={{ width: 160 }}>
          <DatePicker
            label="تا تاریخ"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate2}
            onChange={(e) => {
              setSelectedDate2(moment(e).format("YYYY-MM-DD"));
            }}
          />
        </Grid>
      </Grid>
      <ResponsiveTable
        title={"درخواست های در انتظار تایید"}
        columns={tableDataCol}
        data={dataTable}
        paginated
      />
    </Grid>
  );
};
