import React, { useContext, useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { Button, TextField } from "@mui/material";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { useDispatch } from "react-redux";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { provinceChainsEditBar } from "../../services/province-chains-edit-bar";

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

  const formik = useFormik({
    initialValues: {
      weight: item?.weight ? item?.weight : "",
      quantity: item?.quantity ? item?.quantity : "",
    },
    validationSchema: Yup.object({
      weight: Yup.number().required("این فیلد اجباری است!"),
      quantity: Yup.number().required("این فیلد اجباری است!"),
    }),
  });

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

  return (
    <Grid container xs={12} alignItems="center" justifyContent="center" gap={2}>
      <Grid xs={12}>
        <TextField
          id="quantity"
          fullWidth
          label="مقدار"
          variant="outlined"
          sx={{ width: "100%" }}
          value={formik.values.quantity}
          error={
            formik.touched.quantity ? Boolean(formik.errors.quantity) : null
          }
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.quantity && Boolean(formik.errors.quantity)
              ? formik.errors.quantity
              : null
          }
        />
      </Grid>
      <Grid xs={12}>
        <TextField
          id="weight"
          fullWidth
          label="وزن"
          variant="outlined"
          sx={{ width: "100%" }}
          value={formik.values.weight}
          error={formik.touched.weight ? Boolean(formik.errors.weight) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.weight && Boolean(formik.errors.weight)
              ? formik.errors.weight
              : null
          }
        />
      </Grid>
      <Grid xs={12}>
        <Button
          disabled={!formik.isValid}
          variant="contained"
          fullWidth
          onClick={() => {
            dispatch(
              provinceChainsEditBar({
                chain_allcation_key: item?.key,
                quantity: formik.values.quantity,
                weight: formik.values.weight,
              })
            ).then((r) => {
              if (r.payload.error) {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: r.payload.error,
                  severity: "error",
                });
              } else {
                dispatch(CLOSE_MODAL());
                updateTable();
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: "عملیات با موفقیت انجام شد!",
                  severity: "success",
                });
              }
            });
          }}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
