import { Button, Card, Grid } from "@mui/material";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { SPACING } from "../../../../data/spacing";
import { useFormik } from "formik";
import moment from "moment";
import { Yup } from "../../../../lib/yup/yup";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { driverGetRequests } from "../../services/driver-get-requests";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { DriverSubmitCancellationRequest } from "../driver-submit-cancellation-request/DriverSubmitCancellationRequest";
import { format } from "date-fns-jalali";

export const DriverRequests = () => {
  const [dataTable, setDataTable] = useState([]);
  const [archiveDataTable, setArchiveDataTable] = useState([]);
  const { driverRequests } = useSelector((state) => state.driverSlice);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(driverGetRequests());
  }, []);

  useEffect(() => {
    const d = driverRequests
      ?.filter((item) => item.vetState === "pending")
      .map((item, i) => {
        return [
          i + 1,
          item.barCode,
          item.car.typeCar,
          item.car.pelak,
          item?.poultry?.poultryName,
          item?.poultry?.poultryMobile,
          item?.poultry?.poultryProvince +
            " - " +
            item?.poultry?.poultryCity +
            " - " +
            item?.poultry?.poultryAddress,
          item.killhouseUser.name,
          item.killhouseUser?.killHouseOperator?.user?.mobile,
          item.killhouseUser?.address?.address,
          format(new Date(item.killRequest.reciveDate), "yyyy/MM/dd"),
          item.killRequest.reciveTime,
          <Button
            disabled={item.assignmentStateArchive === "True"}
            color="secondary"
            variant="outlined"
            key={i}
            onClick={() => {
              dispatch(
                DRAWER({
                  right: !(window.innerWidth <= 600),
                  bottom: window.innerWidth <= 600,
                  title: "درخواست انصراف از دریافت بار",
                  content: <DriverSubmitCancellationRequest item={item} />,
                })
              );
            }}
          >
            انصراف
          </Button>,
        ];
      });

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

  useEffect(() => {
    const d = driverRequests
      ?.filter((item) => item.vetState !== "pending")
      .map((item, i) => {
        return [
          i + 1,
          item.barCode,
          item.car.typeCar,
          item.car.pelak,
          item?.poultry?.poultryName,
          item?.poultry?.poultryMobile,
          item?.poultry?.poultryProvince +
            " - " +
            item?.poultry?.poultryCity +
            " - " +
            item?.poultry?.poultryAddress,
          item.killhouseUser.name,
          item.killhouseUser?.killHouseOperator?.user?.mobile,
          item.killhouseUser?.address?.address,
          format(new Date(item.killRequest.reciveDate), "yyyy/MM/dd"),
          item.killRequest.reciveTime,
        ];
      });

    setArchiveDataTable(d);
  }, [driverRequests]);

  const formik = useFormik({
    initialValues: {
      capacity: "",
      recieveTime: "",
      recieveDate: moment(Date()).format("YYYY-MM-DD hh:mm:ss"),
    },
    validationSchema: Yup.object({
      capacity: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      recieveTime: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا وزن را وارد کنید!"),
    }),
  });

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

  return (
    <Grid
      container
      alignItems="center"
      justifyContent="space-between"
      gap={SPACING.SMALL}
      mt={SPACING.MEDIUM}
    >
      <Card sx={{ width: "100%" }}>
        <AdvancedTable
          name="درخواست های فعال"
          columns={[
            "ردیف",
            "کد بار",
            "نوع خودرو",
            "پلاک خودرو",
            "نام مرغدار",
            "تلفن مرغدار",
            "آدرس مرغدار",
            "نام کشتارگاه",
            "تلفن کشتارگاه",
            "آدرس کشتارگاه",
            "تاریخ دریافت",
            "ساعت",
            "عملیات",
          ]}
          data={dataTable}
        />
        <AdvancedTable
          name="بایگانی"
          columns={[
            "ردیف",
            "کد بار",
            "نوع خودرو",
            "پلاک خودرو",
            "نام مرغدار",
            "تلفن مرغدار",
            "آدرس مرغدار",
            "نام کشتارگاه",
            "تلفن کشتارگاه",
            "آدرس کشتارگاه",
            "تاریخ دریافت",
            "ساعت",
          ]}
          data={archiveDataTable}
        />
      </Card>
    </Grid>
  );
};
