import React, { useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";
import { useDispatch } from "react-redux";
import { provinceSubSectorCitySharesService } from "../../services/province-sub-sectors-services";
import { IconButton } from "@mui/material";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";
import { ProvinceSubSectorCitySharesSharesEdit } from "../province-sub-sector-city-shares-shares-edit/ProvinceSubSectorCitySharesSharesEdit";
import EditIcon from "@mui/icons-material/Edit";

export const ProvinceSubSectorCitySharesShares = () => {
  const dispatch = useDispatch();
  const [tableData, setTableData] = useState([]);

  const getWageTypeFaType = (type) => {
    let wageType = "";
    switch (type) {
      case "province-kill-request":
        wageType = "تعرفه کشتار و توزیع داخل استان";
        break;
      case "carcasse-sell":
        wageType = "تعرفه کشتار داخل استان و توزیع خارج استان";
        break;
      case "poultry-sell-out-province":
        wageType = "فروش زنده به خارج استان";
        break;

      default:
        wageType = "تعرفه کشتار و توزیع داخل استان";
        break;
    }

    return wageType;
  };

  const fetchData = () => {
    dispatch(provinceSubSectorCitySharesService("city")).then((r) => {
      const d = r.payload.data.map((item, i) => {
        return [
          i + 1,
          getWageTypeFaType(item?.percentageOfWageType?.wageType?.enName),
          item?.percentageOfWageType?.wageType?.amount?.toLocaleString(),
          Math.round(
            (item?.percentageOfWageType?.wageType?.amount / 100) *
              item?.percentageOfWageType?.wageType?.percentages?.filter(
                (item) => item?.name === "اتحادیه"
              )[0]?.percent
          ),
          item?.percent,
          <IconButton
            key={i}
            color="primary"
            size="small"
            onClick={() => {
              dispatch(
                OPEN_MODAL({
                  title: "ویرایش",
                  content: (
                    <ProvinceSubSectorCitySharesSharesEdit
                      updateTable={fetchData}
                      item={item}
                    />
                  ),
                })
              );
            }}
          >
            <EditIcon />
          </IconButton>,
        ];
      });

      setTableData(d);
    });
  };
  useEffect(() => {
    fetchData();
  }, [dispatch]);

  return (
    <Grid
      container
      xs={12}
      justifyContent="center"
      alignItems="center"
      direction="column"
    >
      <Grid container xs={12} justifyContent="center" alignItems="center">
        <ResponsiveTable
          columns={[
            "ردیف",
            "ماهیت تعرفه",
            "کل تعرفه (ریال)",
            "سهم اتحادیه (ریال)",
            "درصد سهم تعاونی ها (از سهم اتحادیه)",
            "عملیات",
          ]}
          title="سهم بندی"
          data={tableData}
          paginated
        />
      </Grid>
    </Grid>
  );
};
