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

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({
          src: GenerateSrcUrl(value),
          thumbnail: 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}
        onSelectImage={(index, image) => {
          setgalleryImages(
            galleryImages.map((g, idx) =>
              index === idx ? { ...g, isSelected: !g.isSelected } : g
            )
          );
        }}
      />
    </div>
  );
}
export default JobsDocumentGalleryExternal;
