import { UseFormSetValue } from "react-hook-form";
import { Place } from "../../../data/datasource/api/entities/place";
import { useDropzoneMultiplesImages } from "../../../domain/useCase/useDropzoneMultiplesImages";
import "./assets/css/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";

interface props {
  setValue: UseFormSetValue<Place>; // Function to set form values.
  imagesList?: File[] | string[]; // Optional list of images.
}

// MultipleImagesDropzone component handles the drag-and-drop functionality for multiple images.
export const MultipleImagesDropzone = ({ setValue, imagesList }: props) => {
  const { getRootProps, getInputProps, imagesFiles, removeImage } =
    useDropzoneMultiplesImages(setValue, imagesList); // Custom hook to manage dropzone logic.

  return (
    <div className="multiple_images_dropzone_root">
      <div {...getRootProps({ className: "multiple_image_dropzone" })}>
        <input {...getInputProps()} />
        <p>Arrastra tu imagen o seleccionala dando click aquí.</p>
        {/* Instruction for the user to drag and drop or click to select images. */}
      </div>
      <div className="previews_list_cnt">
        {imagesFiles.map((image, index) => {
          return (
            <div className="preview" key={index}>
              <div className="preview_inner">
                <img
                  src={image.preview}
                  onLoad={() => {
                    URL.revokeObjectURL(image.preview); // Revoke object URL after image is loaded.
                  }}
                  alt=""
                />
              </div>
              <FontAwesomeIcon
                key={index}
                className="remove_button"
                icon={faTimesCircle}
                onClick={() => removeImage(index)} // Remove image from the list.
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};
