import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
  TextField,
  FormHelperText,
} from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import { useRef, useState } from "react";
const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;

const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
  const t = useTranslations();
  const [description, setDescription] = useState("");
  const [fileData, setFileData] = useState(null);
  const inputRef = useRef(null);

  const formik = useFormik({
    initialValues: {
      description: "",
      fileData: null,
    },
    onSubmit: () => {
      const formData = new FormData();
      if (description !== "")
        formData.append("expert_description", description);
      if (fileData !== null) formData.append("file", fileData);
      handleClose();
      confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
    },
  });

  const handleUploadClick = () => {
    // 👇 We redirect the click event onto the hidden input element
    inputRef.current?.click();
  };

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

  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      const fileSizeInBytes = selectedFile.size;
      if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
        formik.setFieldError(
          "fileData",
          `File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
        );
        e.target.value = null;
      } else {
        setFileData(selectedFile);
        formik.setFieldValue("fileData", selectedFile);
        formik.setFieldError("fileData", "");
      }
    }
  };

  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}
          onBlur={formik.handleBlur("description")}
          fullWidth
          variant="outlined"
          sx={{ mt: 1 }}
        />
        <div>
          <label htmlFor="fileData">
            <Button
              variant="outlined"
              color="primary"
              onClick={handleUploadClick}
              component="span"
              sx={{ mt: 1, width: "100%" }}
            >
              {fileData ? (
                <>
                  Name : {fileData.name}
                  <br />
                  Size : {fileData.size}
                </>
              ) : (
                <>{t("ConfirmDialog.choose_file")}</>
              )}
            </Button>
          </label>
          <input
            id="fileData"
            name="fileData"
            type="file"
            accept=".pdf, image/*"
            ref={inputRef}
            onChange={handleFileChange}
            style={{ display: "none" }}
          />
        </div>
        <FormHelperText error={Boolean(formik.errors.fileData)}>
          {formik.errors.fileData && formik.errors.fileData}
        </FormHelperText>
      </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;