import { useEffect } from "react";
import { Gallery } from "react-grid-gallery";
import { fetchImgproxyThumbnails } from "./jobs-documents-imgproxy-gallery.component";

/*
################################################################################################
 Developer Note:
 Known Technical Debt Item
         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
################################################################################################
*/

function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState }) {
  const [galleryImages, setgalleryImages] = externalMediaState;

  useEffect(() => {
    if (jobId) fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId, imagesOnly: true });
  }, [jobId, setgalleryImages]);

  return (
    <div className="clearfix">
      <Gallery
        images={galleryImages}
        backdropClosesModal={true}
        onSelect={(index) => {
          setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
        }}
      />
    </div>
  );
}

export default JobsDocumentImgproxyGalleryExternal;
