import React, { useCallback, useMemo } from "react";
import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
import { imageGalleryItems } from "../state";


export default function ImageGalleryX() 
{
  const root: string = process.env.REACT_APP_WWW_ROOT!;
  const uploads: string = root + 'uploads/';

  const items = useMemo(() => 
  {
    return imageGalleryItems.map((item: ReactImageGalleryItem) => 
    {
      const newItem = { ...item };
      newItem.original = uploads + newItem.original;
      newItem.thumbnail = uploads + newItem.thumbnail;
//      newItem.thumbnailClass = {''}
      return newItem;
    });
  }, []);

  return (
    <div className={''}>
      <ImageGallery
        items={items}
        showFullscreenButton={true}
        showThumbnails={true}
        showBullets={true}
        showIndex={true}
      />
    </div>
  );
}