import { useEffect } from "react";
import { Gallery } from "../../vendor/react-grid-gallery";
import { useTranslation } from "react-i18next";
import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";

/*
################################################################################################
 Developer Note:
 Known Technical Debt Item
         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
################################################################################################
*/
function JobsDocumentGalleryExternal({
  data,

  externalMediaState
}) {
  const [galleryImages, setgalleryImages] = externalMediaState;
  const { t } = useTranslation();

  useEffect(() => {
    let documents = data.reduce((acc, value) => {
      if (value.type.startsWith("image")) {
        acc.push({
          fullsize: GenerateSrcUrl(value),
          src: GenerateThumbUrl(value),
          thumbnailHeight: 225,
          thumbnailWidth: 225,
          isSelected: false,
          key: value.key,
          extension: value.extension,
          id: value.id,
          type: value.type,
          tags: [{ value: value.type, title: value.type }],
          size: value.size
        });
      }

      return acc;
    }, []);
    setgalleryImages(documents);
  }, [data, setgalleryImages, t]);

  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 JobsDocumentGalleryExternal;