import { Button, Switch, TextField, Typography } from "@mui/material";
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { manageProcessBuyReqService } from "../../services/manage-process-buy-req";
import { manageProcessBuyReqOperationService } from "../../services/manage-process-buy-req-operation";
import DoneIcon from "@mui/icons-material/Done";

export const ProvinceManageBuyReqLimitOperation = ({
  item,
  getLimitInformation,
  fetchdata,
}) => {
  const dispatch = useDispatch();

  const [isChecked, setIsChecked] = useState(
    item.allowPurchaseRequest.limitation
  );
  const [textValue, setTextValue] = useState(
    item?.allowPurchaseRequest?.limitationNumber
  );

  useEffect(() => {
    setIsChecked(item.allowPurchaseRequest.limitation);
    setTextValue(item.allowPurchaseRequest.limitationNumber);
  }, [item]);

  const isValidValue = Number(textValue) > 0;

  const handleTextChange = (event) => {
    setTextValue(event.target.value);
  };

  const handleSwitchChange = () => {
    const newChecked = !isChecked;
    setIsChecked(newChecked);

    dispatch(
      manageProcessBuyReqOperationService({
        kill_house_key: item.key,
        limitation: newChecked,
      })
    );
    dispatch(manageProcessBuyReqService());
    getLimitInformation();
    fetchdata();
  };

  const handleSubmit = () => {
    dispatch(
      manageProcessBuyReqOperationService({
        kill_house_key: item.key,
        limitation: isChecked,
        limitation_number: Number(textValue),
      })
    );
    dispatch(manageProcessBuyReqService());
    getLimitInformation();
    fetchdata();
  };

  return (
    <Grid container direction="column" gap={SPACING.SMALL} pt={SPACING.TINY}>
      <Grid container alignItems="center" spacing={1}>
        <Grid item>
          <Switch
            // disabled={!item.allowPurchaseRequest.allow}
            checked={isChecked}
            onChange={handleSwitchChange}
            color="primary"
          />
        </Grid>
        <Grid item>
          <Typography>محدودیت بر اساس بدهی</Typography>
        </Grid>
      </Grid>

      {isChecked && (
        <Grid container alignItems="center" spacing={1}>
          <Grid item xs>
            <TextField
              fullWidth
              // disabled={!item.allowPurchaseRequest.allow}
              size="small"
              label="مبلغ بدهی"
              value={textValue}
              onChange={handleTextChange}
              variant="outlined"
            />
          </Grid>
          <Grid item>
            <Button
              onClick={handleSubmit}
              variant="contained"
              color="primary"
              disabled={!isValidValue}
              sx={{
                minWidth: "40px",
              }}
            >
              <DoneIcon />
            </Button>
          </Grid>
        </Grid>
      )}
    </Grid>
  );
};
