import React, { useContext, useEffect } from "react";
import { TextField } from "@mui/material";
import { Button } 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 { provinceJahadEditAllocationService } from "../../services/province-jahad-submit-allocation";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";

export const ProvinceJahadUnionSubmitRealWeight = ({
  item,
  updateTable,
  getDashboardData,
}) => {
  const validationSchema = Yup.object({
    factory: Yup.string(),
    weight: Yup.number()
      .required("وزن الزامی است")
      .positive("وزن باید مثبت باشد"),
    billOfLadingCode: Yup.string(),
  });

  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);

  const formik = useFormik({
    initialValues: {
      factory: "",
      weight: item?.weight || "",
      billOfLadingCode: "",
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      let req = {
        state: "accepted",
        code: values.billOfLadingCode,
        place: values.factory,
        role: getRoleFromUrl(),
        allocation_key: item?.key,
      };

      dispatch(provinceJahadEditAllocationService(req)).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",
          });
          dispatch(CLOSE_MODAL());
          updateTable();
          getDashboardData();
        }
      });
    },
  });

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

  return (
    <Grid container xs={12} justifyContent="center" gap={2}>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="weight"
          name="weight"
          label="وزن"
          type="number"
          value={formik.values.weight}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.weight && Boolean(formik.errors.weight)}
          helperText={formik.touched.weight && formik.errors.weight}
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          fullWidth
          id="factory"
          name="factory"
          label="مکان دریافت"
          value={formik.values.factory}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.factory && Boolean(formik.errors.factory)}
          helperText={formik.touched.factory && formik.errors.factory}
        />
      </Grid>

      <Grid item xs={12}>
        <TextField
          fullWidth
          id="billOfLadingCode"
          name="billOfLadingCode"
          label="کد بارنامه"
          value={formik.values.billOfLadingCode}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.billOfLadingCode &&
            Boolean(formik.errors.billOfLadingCode)
          }
          helperText={
            formik.touched.billOfLadingCode && formik.errors.billOfLadingCode
          }
        />
      </Grid>
      <Grid item xs={12}>
        <Button
          fullWidth
          variant="contained"
          type="submit"
          onClick={formik.handleSubmit}
        >
          ارسال
        </Button>
      </Grid>
    </Grid>
  );
};
