import React, { useContext, useState } from "react";
import {
  Button,
  TextField,
  Typography,
  Checkbox,
  FormControlLabel,
} from "@mui/material";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { AppContext } from "../../../../contexts/AppContext";
import { slaughterEditDispenserInfoService } from "../../services/slaughter-edit-dispenser-info";

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

  const [hasLimitation, setHasLimitation] = useState(item?.limitation || false);
  const [governmentalValue, setGovernmentalValue] = useState(
    
      item?.governmentalLimitationWeight ||
      0
  );
  const [freeValue, setFreeValue] = useState(
     item?.freeLimitationWeight || 0
  );

  const handleSubmit = (e) => {
    e.preventDefault();

    const submitData = {
      key: item?.key,
      limitation: hasLimitation,
      governmental_limitation_weight: hasLimitation
        ? Number(governmentalValue)
        : 0,
      free_limitation_weight: hasLimitation ? Number(freeValue) : 0,
    };

    dispatch(slaughterEditDispenserInfoService(submitData)).then((r) => {
      if (r.payload?.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "عملیات با موفقیت انجام شد.",
          severity: "success",
        });
        if (updateTable) {
          updateTable();
        }
        dispatch(CLOSE_MODAL());
      }
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <Grid container gap={SPACING.SMALL} p={2}>
        <Grid container item xs={12} alignItems="center" gap={1}>
          <Typography variant="body2" color="text.secondary">
            اطلاعات توزیع کننده:
          </Typography>
          <Typography variant="h6" mb={0.75}>
            {item?.firstName} {item?.lastName}
          </Typography>
        </Grid>

        <Grid item xs={12} mb={1}>
          <FormControlLabel
            control={
              <Checkbox
                checked={hasLimitation}
                onChange={(e) => setHasLimitation(e.target.checked)}
                color="primary"
              />
            }
            label="محدودیت فروش روزانه"
          />
        </Grid>

        {hasLimitation && (
          <>
            <Grid item xs={12}>
              <TextField
                label="حداکثر فروش دولتی (کیلوگرم)"
                variant="outlined"
                fullWidth
                type="number"
                value={governmentalValue}
                onChange={(e) => setGovernmentalValue(e.target.value)}
                inputProps={{ min: 0 }}
              />
            </Grid>

            <Grid item xs={12}>
              <TextField
                label="حداکثر فروش آزاد (کیلوگرم)"
                variant="outlined"
                fullWidth
                type="number"
                value={freeValue}
                onChange={(e) => setFreeValue(e.target.value)}
                inputProps={{ min: 0 }}
              />
            </Grid>
          </>
        )}

        <Grid item xs={12} mt={2}>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            fullWidth
            disabled={
              hasLimitation && governmentalValue === 0 && freeValue === 0
            }
          >
            ثبت
          </Button>
        </Grid>
      </Grid>
    </form>
  );
};