import { Checkbox, FormControlLabel, IconButton, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
// import { updateLossesPermissionService } from "../../services/update-losses-permission";
import TuneIcon from "@mui/icons-material/Tune";
import { useNavigate } from "react-router-dom";
import { ROUTE_PROVINCE_ROUTE_POLICY_COUNCIL_KILLHOUSE_GUILDS } from "../../../../routes/routes";
import { postKillhouseGuildPermissionService } from "../../services/post-killhouse-guild-permission";
import { getKillhouseGuildsPermissionService } from "../../services/get-killhouse-guilds-permission";

export const ProvincePolicyKillhouseGuilds = () => {
  const navigate = useNavigate();
  const [isChecked, setIsChecked] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getKillhouseGuildsPermissionService()).then((r) => {
      setIsChecked(r.payload.data.allowState);
    });
  }, []);

  const handleChange = (event) => {
    dispatch(
      postKillhouseGuildPermissionService({
        allow: event.target.checked,
      })
    );
    setIsChecked(event.target.checked);
  };

  return (
    <Grid container alignItems="center" gap={SPACING.TINY}>
      <FormControlLabel
        control={
          <Checkbox checked={isChecked} onChange={handleChange} name="item4" />
        }
        label="اجازه ثبت صنف به کشتارگاه ها"
      />
      <Tooltip title="مدیریت">
        <IconButton
          disabled={!isChecked}
          color="success"
          onClick={() => {
            navigate(ROUTE_PROVINCE_ROUTE_POLICY_COUNCIL_KILLHOUSE_GUILDS);
          }}
        >
          <TuneIcon />
        </IconButton>
      </Tooltip>
    </Grid>
  );
};
