import React, { useContext } from "react";
import { Button, TextField, Typography } from "@mui/material";
import { useFormik } from "formik";
import * as yup from "yup";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch } from "react-redux";
import { provinceUpdateKillerIdentityService } from "../../services/province-update-killer-identity";

const validationSchema = yup.object({
  maximumIncrease: yup
    .number()
    .typeError("لطفا یک عدد وارد کنید")
    .min(0, "عددی بین 0 تا 100 وارد کنید!")
    .max(100, "عددی بین 0 تا 100 وارد کنید!")
    .required("این فیلد اجباری است"),
  maximumDecrease: yup
    .number()
    .typeError("لطفا یک عدد وارد کنید")
    .min(0, "عددی بین 0 تا 100 وارد کنید!")
    .max(100, "عددی بین 0 تا 100 وارد کنید!")
    .required("این فیلد اجباری است"),
});

export const ProvinceManagementMaximumLoad = ({ item, fetchdata }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      maximumIncrease: item?.maximumLoadVolumeIncrease || 0,
      maximumDecrease: item?.maximumLoadVolumeReduction || 0,
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      dispatch(
        provinceUpdateKillerIdentityService({
          kill_house_key: item?.key,
          maximum_load_volume_increase: values.maximumIncrease,
          maximum_load_volume_reduction: values.maximumDecrease,
        })
      ).then((r) => {
        if (r.payload.error) {
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: r.payload.error,
            severity: "error",
          });
        } else {
          fetchdata();
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: "عملیات با موفقیت انجام شد.",
            severity: "success",
          });
        }
      });
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <Typography variant="body2">
        درصد افزایش/کاهش حجم ورود اطلاعات بار
      </Typography>
      <TextField
        size="small"
        fullWidth
        id="maximumIncrease"
        name="maximumIncrease"
        label="حداکثر افزایش حجم بار"
        type="number"
        value={formik.values.maximumIncrease}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={
          formik.touched.maximumIncrease &&
          Boolean(formik.errors.maximumIncrease)
        }
        helperText={
          formik.touched.maximumIncrease && formik.errors.maximumIncrease
        }
        margin="dense"
      />

      <TextField
        size="small"
        fullWidth
        id="maximumDecrease"
        name="maximumDecrease"
        label="حداکثر کاهش حجم بار"
        type="number"
        value={formik.values.maximumDecrease}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={
          formik.touched.maximumDecrease &&
          Boolean(formik.errors.maximumDecrease)
        }
        helperText={
          formik.touched.maximumDecrease && formik.errors.maximumDecrease
        }
        margin="dense"
      />

      <Button type="submit" variant="contained" sx={{ mt: 1 }} fullWidth>
        ثبت اطلاعات
      </Button>
    </form>
  );
};
