import { IconButton } from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
// import { useNavigate } from "react-router-dom";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { provinceFinancialGetSlaughterSattlementService } from "../../services/province-financial-get-slaughter-sattlement-service";
import { ProvinceFinancialSettlementSlaughterForm } from "../province-financial-settlement-slaughter-form/ProvinceFinancialSettlementSlaughterForm";
import EditIcon from "@mui/icons-material/Edit";

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

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

  useEffect(() => {
    const d = provinceFinancialGetSlaughterSattlement?.map((item, i) => {
      return [
        item.killHouse.name,
        item.killHouse.killHouseOperator.user.fullname,
        item.killHouse.killHouseOperator.user.mobile,
        item.killHouse.killHouseOperator.user.city,
        item.killHouse.killHouseOperator.user.province,
        item.amount.toLocaleString() + " ﷼",
        <IconButton
          key={i}
          color="primary"
          onClick={() => {
            dispatch(
              DRAWER({
                title: "انجام عملیات تسویه حساب",
                right: !(window.innerWidth <= 600),
                // top: !(window.innerWidth <= 600),
                bottom: window.innerWidth <= 600,
                content: (
                  <ProvinceFinancialSettlementSlaughterForm item={item} />
                ),
              })
            );
          }}
        >
          <EditIcon />
        </IconButton>,
      ];
    });

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

  return (
    <Grid container mt={SPACING.SMALL}>
      <AdvancedTable
        name={"تسویه با کشتارگاه"}
        columns={["نام", "مالک", "تلفن", "شهر", "استان", "مبلغ", "تسویه"]}
        data={dataTable}
      />
    </Grid>
  );
};
