import { REJECT_MACHINARY_OFFICE } 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";
import UploadSystem from "@/core/components/UploadSystem";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
import useDirection from "@/lib/app/hooks/useDirection";

const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
  const t = useTranslations();
  const { directionApp } = useDirection();
  const [description, setDescription] = useState("");
  const [selectedImage, setSelectedImage] = useState("");
  const [fileType, setfileType] = useState(null);
  const [fileName, setfileName] = useState(null);
  const [showAddIcon, setShowAddIcon] = useState(true);

  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_MACHINARY_OFFICE, rowId, formData);
    },
  });

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

  const handleUploadChange = (event) => {
    const uploadedFile = event.target?.files?.[0];
    if (uploadedFile) {
      const maxFileSize = 2 * 1024 * 1024;
      if (uploadedFile.size > maxFileSize) {
        UploadFileNotification(directionApp, t);
        event.target.value = "";
        return;
      }
      const fileType = event.target?.files?.[0].type;
      const fileName = event.target?.files?.[0].name;
      setSelectedImage(URL.createObjectURL(uploadedFile));
      setfileType(fileType);
      setfileName(fileName);
      formik.setFieldValue("reject_img", uploadedFile);
      setShowAddIcon(false);
    }
  };

  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 }}
        />
        <UploadSystem
          selectedImage={selectedImage}
          handleUploadChange={handleUploadChange} // Pass the updated function directly
          setselectedImage={setSelectedImage}
          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
          fieldname="reject_img"
          fileType={fileType}
          fileName={fileName}
          imageAlt={t("app_name")}
          imageSize={[250 /*width*/, 150 /*height*/]}
          setShowAddIcon={setShowAddIcon}
          showAddIcon={showAddIcon}
        />
      </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;