import React, { useContext, useEffect } 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 { AppContext } from "../../../../contexts/AppContext";
import { useDispatch } from "react-redux";
import { provincePolicyCreateWage } from "../../services/province-policy-create-wage";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { provincePolicyEditShareType } from "../../services/province-policy-edit-share-type";

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

  const formik = useFormik({
    initialValues: {
      wageName: item?.name ? item?.name : "",
    },
    validationSchema: Yup.object({
      wageName: Yup.string().typeError("لطفا فیلد را به درستی وارد کنید.!"),
    }),
  });

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

  return (
    <Grid container xs={12} gap={2}>
      <Grid xs={12}>
        <TextField
          id="wageName"
          label="عنوان نقش"
          variant="outlined"
          sx={{ width: "100%" }}
          value={formik.values.wageName}
          error={
            formik.touched.wageName ? Boolean(formik.errors.wageName) : null
          }
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.wageName && Boolean(formik.errors.wageName)
              ? formik.errors.wageName
              : null
          }
        />
      </Grid>
      <Grid xs={12}>
        <Button
          variant="contained"
          disabled={!formik.isValid}
          onClick={() => {
            if (itsEdit) {
              dispatch(
                provincePolicyEditShareType({
                  name: formik.values.wageName,
                  id: item?.id,
                })
              ).then((r) => {
                fetchData();
                fetchDataShareTypes();
                dispatch(CLOSE_MODAL());

                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            } else {
              dispatch(
                provincePolicyCreateWage({
                  name: formik.values.wageName,
                })
              ).then((r) => {
                fetchData();
                fetchDataShareTypes();
                dispatch(CLOSE_MODAL());

                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            }
          }}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
