import { Switch, TextField, Typography, Button } from "@mui/material";
import DoneIcon from "@mui/icons-material/Done";
import { useDispatch } from "react-redux";
import { useContext, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { SPACING } from "../../../../data/spacing";
import { provincePolicyWagesEditKillhouse } from "../../../province/services/province-policy-wages-edit-killhouse";

export const ProvinceManageSellingMaxLimitation = ({ item, fetchdata }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);

  const [percent, setPercent] = useState(
    item?.outProvinceSellingLimitationPercent
  );
  const [minimumSaleState, setMinimumSaleState] = useState(
    item?.outProvinceSellingLimitation
  );

  const handleToggle = (value) => {
    dispatch(
      provincePolicyWagesEditKillhouse({
        kill_house_key: item?.key,
        out_province_selling_limitation: value,
        out_province_selling_limitation_percent: value ? percent || 0 : 0,
      })
    ).then((r) => {
      setMinimumSaleState(value);

      if (r.payload?.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        fetchdata();
      }
    });
  };

  const handleUpdatePercent = () => {
    if (percent > 100 || percent < 1) {
      openNotif({
        vertical: "top",
        horizontal: "center",
        msg: "درصد باید بین ۱ تا ۱۰۰ باشد.",
        severity: "error",
      });
      return;
    }

    dispatch(
      provincePolicyWagesEditKillhouse({
        kill_house_key: item?.key,
        out_province_selling_limitation: true,
        out_province_selling_limitation_percent: percent,
      })
    ).then((r) => {
      if (r.payload?.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        fetchdata();
      }
    });
  };

  return (
    <Grid container direction="column" gap={SPACING.SMALL}>
      <Grid container alignItems="center" spacing={1}>
        <Grid item>
          <Switch
            checked={minimumSaleState}
            onChange={(e) => handleToggle(e.target.checked)}
            inputProps={{
              "aria-label": "in-province-selling-limitation-switch",
            }}
          />
        </Grid>
        <Grid item>
          <Typography>حداکثر فروش به خارج استان</Typography>
        </Grid>
      </Grid>

      {minimumSaleState && (
        <Grid container alignItems="center" spacing={1}>
          <Grid item xs container alignItems="center" spacing={1}>
            <Grid item xs>
              <TextField
                label="درصد فروش"
                size="small"
                fullWidth
                value={percent}
                onChange={(e) => {
                  setPercent(e.target.value);
                }}
                inputProps={{ min: 1, max: 100 }}
              />
            </Grid>
            <Grid item>
              <Button
                variant="contained"
                color="primary"
                onClick={handleUpdatePercent}
                disabled={percent > 100 || percent < 1}
                sx={{
                  minWidth: "40px",
                }}
              >
                <DoneIcon />
              </Button>
            </Grid>
          </Grid>
        </Grid>
      )}
    </Grid>
  );
};
