import { Button, TextField } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import React, { useContext, useEffect } from "react";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { useDispatch } from "react-redux";
import { driverSubmitCancellationRequest } from "../../services/driver-submit-cancellation-request";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { PropTypes } from "prop-types";
import { AppContext } from "../../../../contexts/AppContext";

export const DriverSubmitCancellationRequest = ({ item }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      description: "",
    },
    validationSchema: Yup.object({
      description: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
    }),
  });

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

  return (
    <Grid
      container
      p={SPACING.MEDIUM}
      gap={SPACING.SMALL}
      direction="column"
      flex="1"
      height="100%"
      justifyContent="space-between"
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <Grid>
          <TextField
            id="description"
            label="توضیحات"
            multiline
            rows={5}
            variant="outlined"
            sx={{ width: "100%", height: "100%" }}
            value={formik.values.description}
            error={
              formik.touched.description
                ? Boolean(formik.errors.description)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.description && Boolean(formik.errors.description)
                ? formik.errors.description
                : null
            }
          />
        </Grid>
        <Grid>
          <Button
            fullWidth
            variant="contained"
            disabled={!formik.isValid}
            onClick={() => {
              dispatch(LOADING_START());
              dispatch(
                driverSubmitCancellationRequest({
                  kill_house_request_key: item.key,
                  Kill_house_add_car_key: item.car.key,
                  message: formik.values.description,
                })
              ).then((r) => {
                if (r.error) {
                  if (r.error.message.includes("403")) {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "قبلا درخواست انصراف ثبت کرده اید!",
                      severity: "error",
                    });
                  } else {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "مشکلی پیش آمده است!",
                      severity: "error",
                    });
                  }
                }
              });
              dispatch(LOADING_END());
              dispatch(DRAWER({ right: false, bottom: false, content: null }));
            }}
          >
            ثبت اطلاعات
          </Button>
        </Grid>
      </Grid>
    </Grid>
  );
};

DriverSubmitCancellationRequest.propTypes = {
  item: PropTypes.any,
};
