import { Switch } from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { Grid } from "../../../../components/grid/Grid";
import { policyChangePoultryChooseSlaughterService } from "../../services/policy-change-poultry-choose-slaughter";
import { provinceGetPoultriesService } from "../../services/province-get-poultries";

export const PolicyPoultryChooseSlaughter = () => {
  const dispatch = useDispatch();
  const { provinceGetPoultries } = useSelector((state) => state.provinceSlice);
  const [data, setData] = useState();

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

  useEffect(() => {
    const d = provinceGetPoultries?.map((item) => {
      return [
        item.name,
        <Switch
          key="kkk"
          checked={item.allowState}
          onChange={(event) => {
            dispatch(
              policyChangePoultryChooseSlaughterService({
                poultry_key: item.key,
                allow: event.target.checked,
              })
            ).then(() => {
              dispatch(provinceGetPoultriesService());
            });
            // setChecked(event.target.checked);
          }}
          name="checked"
          color="primary"
        />,
      ];
    });
    setData(d);
  }, [provinceGetPoultries]);

  return (
    <Grid container>
      <AdvancedTable
        name="دسترسی مرغداران جهت انتخاب کشتارگاه"
        columns={["مرغدار", "دسترسی"]}
        data={data}
      />
    </Grid>
  );
};
