expert-front/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx

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

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

  //formik
  const validationSchema = Yup.object().shape({
    proposed_amount: Yup.string().required(
      t("ConfirmDialog.approved_amount_error")
    ),
  });
  const formik = useFormik({
    initialValues: {
      proposed_amount: "",
      description: "",
    },
    validationSchema,
    onSubmit: () => {
      const formData = new FormData();
      formData.append("approved_amount", proposedAmount);
      if (description != "") formData.append("expert_description", description);
      handleClose();
      confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
    },
  });

  const handleDescriptionChange = (event) => {
    setDescription(event.target.value);
  };
  const handleAmountChange = (event) => {
    if (/^\d*$/.test(event.target.value)) {
      setProposedAmount(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("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 }}
        />
        <TextField
          name="proposed_amount"
          label={t("ConfirmDialog.approved_amount")}
          type="number"
          inputProps={{
            min: 0,
            inputMode: "numeric",
            pattern: "[0-9]*",
          }}
          variant="outlined"
          value={proposedAmount}
          onChange={handleAmountChange}
          onBlur={formik.handleBlur("proposed_amount")}
          error={
            formik.touched.proposed_amount &&
            Boolean(formik.errors.proposed_amount)
          }
          helperText={
            formik.touched.proposed_amount && formik.errors.proposed_amount
          }
          sx={{ mt: 1 }}
          fullWidth
        />
        <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;