import React, { useContext, useEffect } from "react";
import { Button, TextField } from "@mui/material";
import { useFormik } from "formik";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch } from "react-redux";
import { Yup } from "../../../../lib/yup/yup";
import { Grid } from "../../../../components/grid/Grid";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import {
  provinceSubmitNewMovingText,
  provinceUpdateMobileMessagesActiveTextService,
} from "../../services/province-get-mobile-messages";
export const ProvincePolicyMobileMessageSubmit = ({
  fetchApiData,
  item,
  isEdit,
}) => {
  const [openNotif] = useContext(AppContext);

  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      movingText: item?.movingText ? item?.movingText : "",
    },
    validationSchema: Yup.object({
      movingText: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
    }),
  });

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

  return (
    <Grid xs={12} container direction="column" gap={2}>
      <TextField
        id="movingText"
        label="متن متحرک"
        multiline
        rows={5}
        variant="outlined"
        sx={{ width: "100%", height: "100%" }}
        value={formik.values.movingText}
        error={
          formik.touched.movingText ? Boolean(formik.errors.movingText) : null
        }
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        helperText={
          formik.touched.movingText && Boolean(formik.errors.movingText)
            ? formik.errors.movingText
            : null
        }
      />

      <Grid>
        <Button
          fullWidth
          variant="contained"
          disabled={!formik.isValid}
          onClick={() => {
            if (isEdit) {
              dispatch(
                provinceUpdateMobileMessagesActiveTextService({
                  moving_text: formik.values.movingText,
                  moving_text_key: item?.key,
                })
              ).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());
                  fetchApiData(1);
                }
              });
            } else {
              dispatch(
                provinceSubmitNewMovingText({
                  moving_text: formik.values.movingText,
                })
              ).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());
                  fetchApiData(1);
                }
              });
            }
          }}
        >
          ویرایش توضیحات
        </Button>
      </Grid>
    </Grid>
  );
};
