import React, { useContext } from "react";
import { TextField, Button, Grid } from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
import { provinceEditAgeMessagesService } from "../../services/province-age-message";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch } from "react-redux";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";

export const ProvinceEditAgeMessage = ({ item, fetchData }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const validationSchema = Yup.object({
    ageRange: Yup.number()
      .required("بازه سنی ضروری است")
      .max(99, "عدد دورقمی وارد کنید!"),
    lossPercent: Yup.number()
      .required("درصد افت ضروری است")
      .max(99, "عدد دورقمی وارد کنید!"),
    message: Yup.string()
      .required("پیغام ضروری است")
      .max(500, "حداکثر 500 کاراکتر"),
  });

  const formik = useFormik({
    initialValues: {
      ageRange: item?.poultryAge,
      message: item?.message,
      lossPercent: item?.lossesPercent,
    },
    validationSchema,
    onSubmit: (values) => {
      dispatch(
        provinceEditAgeMessagesService({
          message: values.message,
          poultry_age: values.ageRange,
          losses_percent: values.lossPercent,
          notif_key: item?.key,
        })
      ).then((r) => {
        if (r.payload.error) {
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: r.payload.error,
            severity: "error",
          });
        } else {
          fetchData();
          dispatch(DRAWER({ right: false, bottom: false, content: null }));
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: "عملیات با موفقیت انجام شد.",
            severity: "success",
          });
        }
      });
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        xs={12}
        gap={2}
      >
        <Grid item xs={12}>
          <TextField
            fullWidth
            id="ageRange"
            name="ageRange"
            label="بازه سنی"
            variant="outlined"
            value={formik.values.ageRange}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.ageRange && Boolean(formik.errors.ageRange)}
            helperText={formik.touched.ageRange && formik.errors.ageRange}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            fullWidth
            id="lossPercent"
            name="lossPercent"
            label="درصد افت"
            variant="outlined"
            value={formik.values.lossPercent}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={
              formik.touched.lossPercent && Boolean(formik.errors.lossPercent)
            }
            helperText={formik.touched.lossPercent && formik.errors.lossPercent}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            fullWidth
            multiline
            rows={5}
            id="message"
            name="message"
            label="پیغام"
            variant="outlined"
            value={formik.values.message}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.message && Boolean(formik.errors.message)}
            helperText={formik.touched.message && formik.errors.message}
          />
        </Grid>
        <Grid item xs={12}>
          <Button type="submit" variant="contained" color="primary" fullWidth>
            ثبت
          </Button>
        </Grid>
      </Grid>
    </form>
  );
};
