import React, { useContext } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Button, TextField } from "@mui/material";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { useDispatch } from "react-redux";
import { provincePolicyEditWeightCategory } from "../../services/province-policy-get-weight-category";
import { AppContext } from "../../../../contexts/AppContext";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";

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

  const formik = useFormik({
    initialValues: {
      min_value: item?.minValue || "",
      max_value: item?.maxValue || "",
    },
    validationSchema: Yup.object({
      min_value: Yup.number()
        .typeError("لطفا فیلد را به صورت عددی وارد کنید.!")
        .required("این فیلد اجباری است!"),
      max_value: Yup.number()
        .typeError("لطفا فیلد را به صورت عددی وارد کنید.!")
        .required("این فیلد اجباری است!"),
    }),

    onSubmit: async (values) => {
      dispatch(
        provincePolicyEditWeightCategory({ ...values, key: item?.key })
      ).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",
          });
          fetchData();
          dispatch(CLOSE_MODAL());
        }
      });
    },
  });

  return (
    <Grid container xs={12} direction="column">
      <form onSubmit={formik.handleSubmit}>
        <Grid container xs={12} gap={2} direction="column">
          <TextField
            fullWidth
            id="min_value"
            size="small"
            label="حداقل وزن"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.min_value}
            error={
              formik.touched.min_value ? Boolean(formik.errors.min_value) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.min_value && Boolean(formik.errors.min_value)
                ? formik.errors.min_value
                : null
            }
          />

          <TextField
            fullWidth
            id="max_value"
            size="small"
            label="حداکثر  وزن"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.max_value}
            error={
              formik.touched.max_value ? Boolean(formik.errors.max_value) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.max_value && Boolean(formik.errors.max_value)
                ? formik.errors.max_value
                : null
            }
          />

          <Button variant="contained" fullWidth onClick={formik.handleSubmit}>
            ویرایش
          </Button>
        </Grid>
      </form>
    </Grid>
  );
};
