import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
  TextField,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useState } from "react";
import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";

const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
  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 formik = useFormik({
    initialValues: {
      description: "",
    },
    onSubmit: () => {
      const formData = new FormData();
      if (description != "") formData.append("expert_description", description);
      handleClose();
      confirmData(CONFIRM_TRANSPORTATION_ASSISTANCE, rowId, formData);
    },
  });

  const handleDescriptionChange = (event) => {
    setDescription(event.target.value);
  };
  const handleUploadChange = (event) => {
    const uploadedFile = event.target?.files?.[0];
    if (uploadedFile) {
      const maxFileSize = 2 * 1024 * 1024;
      if (uploadedFile.size > maxFileSize) {
        UploadFileNotification(directionApp, t);
        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("confirm_img", uploadedFile);
      setShowAddIcon(false);
    }
  };
  return (
    <Dialog open={open}>
      <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
      <DialogContent>
        <DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
        <TextField
          name="description"
          multiline
          rows={8}
          placeholder={t("ConfirmDialog.description")}
          value={description}
          onChange={handleDescriptionChange}
          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="confirm_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("ConfirmDialog.button-cancel")}
        </Button>
        <Button onClick={formik.handleSubmit} color="primary">
          {t("ConfirmDialog.button-confirm")}
        </Button>
      </DialogActions>
    </Dialog>
  );
};
export default ConfirmForm;
