import React, { useContext, useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import {
  Button,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  TextField,
} from "@mui/material";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { useDispatch } from "react-redux";
import { pspSubmitGuildGuildCondition } from "../../services/psp-submit-guild-condition";
import { AppContext } from "../../../../contexts/AppContext";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";

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

  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      condition: item.condition ? item.condition : "مرجوع شده",
      description: item.descriptionCondition ? item.descriptionCondition : "",
    },
    validationSchema: Yup.object({
      description: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا توضیحات را وارد کنید."),
    }),
  });

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

  return (
    <Grid container justifyContent="center" alignItems="center">
      <Grid xs={12}>
        <FormControl sx={{ minWidth: 310 }}>
          <InputLabel id="demo-simple-select-label">وضعیت</InputLabel>
          <Select
            className="fullWidthSelect"
            sx={{ minWidth: "100%" }}
            fullWidth
            labelId="demo-simple-select-label"
            id="condition"
            label="وضعیت"
            value={formik.values.condition}
            error={
              formik.touched.condition ? Boolean(formik.errors.condition) : null
            }
            onChange={(e) => {
              formik.setFieldValue("condition", e.target.value);
            }}
            onBlur={formik.handleBlur}
          >
            <MenuItem value={"مرجوع شده"}>مرجوع شده</MenuItem>
            <MenuItem value={"در انتظار تعریف ترمینال"}>
              در انتظار تعریف ترمینال
            </MenuItem>
            <MenuItem value={"در انتظار تایید شاپرک"}>
              در انتظار تایید شاپرک
            </MenuItem>
            <MenuItem value={"در انتظار نصب"}>در انتظار نصب</MenuItem>
            <MenuItem value={"نصب شده"}>نصب شده</MenuItem>
            <MenuItem value={"غیر قابل نصب"}>غیر قابل نصب</MenuItem>
            <MenuItem value={"جمع آوری شده"}>جمع آوری شده</MenuItem>
          </Select>
          <FormHelperText>
            {formik.touched.condition && Boolean(formik.errors.condition)
              ? formik.errors.condition
              : null}
          </FormHelperText>
        </FormControl>
      </Grid>
      <Grid xs={12}>
        <TextField
          id="description"
          name="description"
          label="توضیحات"
          variant="outlined"
          multiline
          rows={4}
          fullWidth
          margin="normal"
          value={formik.values.description}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.description && Boolean(formik.errors.description)
              ? formik.errors.description
              : null
          }
          error={
            formik.touched.description && Boolean(formik.errors.description)
          }
        />
      </Grid>
      <Grid>
        <Button
          disabled={!formik.isValid}
          variant="contained"
          onClick={() => {
            dispatch(
              pspSubmitGuildGuildCondition({
                guild_key: item.key,
                condition: formik.values.condition,
                description_condition: formik.values.description,
              })
            ).then((r) => {
              dispatch(CLOSE_MODAL());
              updateTable();
              if (r.error) {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: "مشکلی پیش آمده است!",
                  severity: "error",
                });
              } else {
                openNotif({
                  vertical: "top",
                  horizontal: "center",
                  msg: "عملیات با موفقیت انجام شد.",
                  severity: "success",
                });
              }
            });
          }}
        >
          {item.descriptionCondition ? "ویرایش وضعیت" : "ثبت وضعیت"}
        </Button>
      </Grid>
    </Grid>
  );
};
