import { REJECT_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
  TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";

const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
  const [description, setDescription] = useState("");
  const t = useTranslations();

  const validationSchema = Yup.object().shape({
    description: Yup.string().required(t("RejectDialog.description_error")),
  });

  const formik = useFormik({
    initialValues: {
      description: "",
    },
    validationSchema,
    onSubmit: () => {
      const formData = new FormData();
      formData.append("expert_description", description);
      handleClose();
      rejectData(REJECT_TRANSPORTATION_ASSISTANCE, rowId, formData);
    },
  });

  const handleDescriptionChange = (event) => {
    setDescription(event.target.value);
    formik.handleChange(event);
  };

  return (
    <Dialog open={open}>
      <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
      <DialogContent>
        <DialogContentText>{t("RejectDialog.context")}</DialogContentText>
        <TextField
          name="description"
          multiline
          rows={8}
          placeholder={t("RejectDialog.description")}
          value={description}
          onChange={handleDescriptionChange}
          onBlur={formik.handleBlur("description")}
          error={
            formik.touched.description && Boolean(formik.errors.description)
          }
          helperText={formik.touched.description && formik.errors.description}
          fullWidth
          variant="outlined"
          sx={{ mt: 1 }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="secondary" autoFocus>
          {t("RejectDialog.button-cancel")}
        </Button>
        <Button onClick={formik.handleSubmit} color="primary">
          {t("RejectDialog.button-reject")}
        </Button>
      </DialogActions>
    </Dialog>
  );
};
export default RejectForm;
