import { Card } from "@mui/material";
import { 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_PROVINCE_FINANCIAL_FILE } from "../../../../routes/routes";
import IconButton from "@mui/material/IconButton";
import { useDispatch, useSelector } from "react-redux";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import EditIcon from "@mui/icons-material/Edit";
import { Grid } from "../../../../components/grid/Grid";
import { provinceFinancialGetPayedFactorsService } from "../../services/province-financial-get-payed-factors-service";
import ProvinceFinancialSlaughterCheckRequest from "../../../file/components/province-financial-slaughter-check-request/ProvinceFinancialSlaughterCheckRequest";
import { formatJustDate } from "../../../../utils/formatTime";

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

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

  useEffect(() => {
    const d = provinceFinancialGetPayedFactors?.map((item, i) => {
      let state = "";
      if (item.state === "pending") {
        state = "در انتظار تایید";
      } else if (item.state === "accepted") {
        state = "تایید نهایی";
      } else if (item.state === "rejected") {
        state = "رد شده";
      }
      return [
        i + 1,
        item?.provinceFactor?.factorBarCode,
        item?.provinceFactor?.provinceCheckInfo?.killHouseAssignment
          ?.killHouseRequest?.killRequest?.killHouse?.name,
        item?.provinceFactor?.provinceCheckInfo?.killHouseAssignment
          ?.killHouseRequest?.killRequest?.killHouse?.killHouseOperator?.user
          ?.mobile,
        formatJustDate(item?.provinceFactor?.createDate),
        formatJustDate(item?.createDate),
        item?.provinceFactor?.totalPrice.toLocaleString() + " ﷼",
        Number(item?.paymentCode),
        <a href={item.factorImage} key="provinceKillRequests">
          <img
            src={item.factorImage}
            width="50"
            height="50"
            alt="بدون بار"
            className="images-file"
          />
        </a>,
        state,
        <IconButton
          key={i}
          color="primary"
          disabled={item.state !== "pending"}
          onClick={() => {
            dispatch(
              DRAWER({
                title: "انجام عملیات تایید / رد درخواست",
                // right: !(window.innerWidth <= 600),
                top: !(window.innerWidth <= 600),
                bottom: window.innerWidth <= 600,
                content: (
                  <Grid contianer>
                    {/* <ProvinceFinancialCheckRequestInfo data={item} /> */}
                    <ProvinceFinancialSlaughterCheckRequest
                      factorKey={item.key}
                      factorType="province"
                    />
                  </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);
  }, [provinceFinancialGetPayedFactors]);

  const [tableDataCol] = useState([
    "ردیف",
    "شناسه فاکتور",
    "کشتارگاه",
    "تلفن کشتارگاه",
    "تاریخ صدور فاکتور",
    "تاریخ پرداخت فاکتور",
    "مبلغ فاکتور نهایی",
    "شناسه پرداخت",
    "سند پرداختی",
    "وضعیت",
    "عملیات",
    "مشاهده",
  ]);
  return (
    <Card>
      <AdvancedTable
        name={"فاکتور های پرداخت شده"}
        columns={tableDataCol}
        data={dataTable}
      />
    </Card>
  );
};
