import React, { useContext, useEffect } from "react";
import { Button, TextField } from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
import { Grid } from "../../../../components/grid/Grid";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { provinceJahadUpdateProductService } from "../../services/province-jahad-update-product";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { NumberInput } from "../../../../components/number-format-custom/NumberFormatCustom";

export const ProvinceJahadEditProduct = ({ item, updateTable }) => {
  const dispatch = useDispatch();

  const [openNotif] = useContext(AppContext);
  const validationSchema = Yup.object({
    light_weight: Yup.number().required("این فیلد اجباری است!"),
    heavy_weight: Yup.number().required("این فیلد اجباری است!"),
    light_wight_industrial: Yup.number().required("این فیلد اجباری است!"),
    heavy_wight_industrial: Yup.number().required("این فیلد اجباری است!"),
    light_wight_dha: Yup.number().required("این فیلد اجباری است!"),
    heavy_wight_dha: Yup.number().required("این فیلد اجباری است!"),
    price: Yup.number()
      .required("این فیلد اجباری است!")
      .positive("عدد مثبت وارد کنید!"),
    unionPrice: Yup.number()
      .required("این فیلد اجباری است!")
      .positive("عدد مثبت وارد کنید!"),
    cooperativePrice: Yup.number()
      .required("این فیلد اجباری است!")
      .positive("عدد مثبت وارد کنید!"),
    shippingPrice: Yup.number()
      .required("این فیلد اجباری است!")
      .positive("عدد مثبت وارد کنید!"),
  });

  const formik = useFormik({
    initialValues: {
      light_weight: item.lightWight || 0,
      heavy_weight: item.heavyWight || 0,
      light_wight_industrial: item.lightWightIndustrial || 0,
      heavy_wight_industrial: item.heavyWightIndustrial || 0,
      light_wight_dha: item.lightWightDha || 0,
      heavy_wight_dha: item.heavyWightDha || 0,
      price: item.price || 0,
      unionPrice: item.unionPrice || 0,
      cooperativePrice: item.cooperativePrice || 0,
      shippingPrice: item.shippingPrice || 0,
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      dispatch(
        provinceJahadUpdateProductService({
          key: item?.key,
          light_wight: values.light_weight,
          heavy_wight: values.heavy_weight,
          light_wight_industrial: values.light_wight_industrial,
          heavy_wight_industrial: values.heavy_wight_industrial,
          light_wight_dha: values.light_wight_dha,
          heavy_wight_dha: values.heavy_wight_dha,
          price: values.price,
          union_price: values.unionPrice,
          cooperative_price: values.cooperativePrice,
          shipping_price: values.shippingPrice,
        })
      ).then((r) => {
        if (r.payload.error) {
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: r.payload.error,
            severity: "error",
          });
        } else {
          updateTable();
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: "عملیات با موفقیت انجام شد.",
            severity: "success",
          });
          dispatch(DRAWER({ right: false, bottom: false, content: null }));
        }
      });
    },
  });

  useEffect(() => {
    formik.validateForm();
  }, [dispatch]);

  return (
    <Grid container xs={12} alignItems="center" justifyContent="center" gap={1}>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="light_weight"
          name="light_weight"
          label="سهمیه دام سبک روستایی"
          value={formik.values.light_weight}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.light_weight && Boolean(formik.errors.light_weight)
          }
          helperText={formik.touched.light_weight && formik.errors.light_weight}
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="heavy_weight"
          name="heavy_weight"
          label="سهمیه دام سنگین روستایی"
          value={formik.values.heavy_weight}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.heavy_weight && Boolean(formik.errors.heavy_weight)
          }
          helperText={formik.touched.heavy_weight && formik.errors.heavy_weight}
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="light_wight_industrial"
          name="light_wight_industrial"
          label="سهمیه دام سبک صنعتی"
          value={formik.values.light_wight_industrial}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.light_wight_industrial &&
            Boolean(formik.errors.light_wight_industrial)
          }
          helperText={
            formik.touched.light_wight_industrial &&
            formik.errors.light_wight_industrial
          }
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="heavy_wight_industrial"
          name="heavy_wight_industrial"
          label="سهمیه دام سنگین صنعتی"
          value={formik.values.heavy_wight_industrial}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.heavy_wight_industrial &&
            Boolean(formik.errors.heavy_wight_industrial)
          }
          helperText={
            formik.touched.heavy_wight_industrial &&
            formik.errors.heavy_wight_industrial
          }
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="light_wight_dha"
          name="light_wight_dha"
          label="سهمیه دام سبک DHA"
          value={formik.values.light_wight_dha}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.light_wight_dha &&
            Boolean(formik.errors.light_wight_dha)
          }
          helperText={
            formik.touched.light_wight_dha && formik.errors.light_wight_dha
          }
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="heavy_wight_dha"
          name="heavy_wight_dha"
          label="سهمیه دام سنگین DHA"
          value={formik.values.heavy_wight_dha}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.heavy_wight_dha &&
            Boolean(formik.errors.heavy_wight_dha)
          }
          helperText={
            formik.touched.heavy_wight_dha && formik.errors.heavy_wight_dha
          }
        />
      </Grid>

      <Grid item xs={12}>
        <NumberInput
          allowLeadingZeros
          thousandSeparator=","
          fullWidth
          id="price"
          label="قیمت هر کیلو (ریال)"
          // InputProps={{
          //   inputComponent: NumberFormatCustom,
          // }}
          variant="outlined"
          value={formik.values.price}
          error={formik.touched.price ? Boolean(formik.errors.price) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.price && Boolean(formik.errors.price)
              ? formik.errors.price
              : null
          }
        />
      </Grid>
      <Grid item xs={12}>
        <NumberInput
          allowLeadingZeros
          thousandSeparator=","
          fullWidth
          id="unionPrice"
          label="کارمزد اتحادیه (ریال)"
          // InputProps={{
          //   inputComponent: NumberFormatCustom,
          // }}
          variant="outlined"
          value={formik.values.unionPrice}
          error={
            formik.touched.unionPrice ? Boolean(formik.errors.unionPrice) : null
          }
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.unionPrice && Boolean(formik.errors.unionPrice)
              ? formik.errors.unionPrice
              : null
          }
        />
      </Grid>
      <Grid item xs={12}>
        <NumberInput
          allowLeadingZeros
          thousandSeparator=","
          fullWidth
          id="cooperativePrice"
          label="کارمزد تعاونی (ریال)"
          // InputProps={{
          //   inputComponent: NumberFormatCustom,
          // }}
          variant="outlined"
          value={formik.values.cooperativePrice}
          error={
            formik.touched.cooperativePrice
              ? Boolean(formik.errors.cooperativePrice)
              : null
          }
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.cooperativePrice &&
            Boolean(formik.errors.cooperativePrice)
              ? formik.errors.cooperativePrice
              : null
          }
        />
      </Grid>
      <Grid item xs={12}>
        <NumberInput
          allowLeadingZeros
          thousandSeparator=","
          fullWidth
          id="shippingPrice"
          label="هزینه حمل و نقل (ریال)"
          // InputProps={{
          //   inputComponent: NumberFormatCustom,
          // }}
          variant="outlined"
          value={formik.values.shippingPrice}
          error={
            formik.touched.shippingPrice
              ? Boolean(formik.errors.shippingPrice)
              : null
          }
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.shippingPrice && Boolean(formik.errors.shippingPrice)
              ? formik.errors.shippingPrice
              : null
          }
        />
      </Grid>
      <Grid item xs={12}>
        <Button
          type="submit"
          variant="contained"
          fullWidth
          onClick={formik.handleSubmit}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
