// @flow
import React from 'react';
import { withRouter } from 'react-router-dom';
import FileThumbnail from 'component/fileThumbnail';

type Props = {
  uri: string,
  collectionId: string,
  collectionName: string,
  collectionCount: number,
  editedCollection?: Collection,
  pendingCollection?: Collection,
  claim: ?Claim,
  collectionItemUrls: Array<string>,
  fetchCollectionItems: (string) => void,
};

function CollectionPreviewOverlay(props: Props) {
  const { collectionId, collectionItemUrls, fetchCollectionItems } = props;

  React.useEffect(() => {
    if (!collectionItemUrls) {
      fetchCollectionItems(collectionId);
    }
  }, [collectionId, collectionItemUrls, fetchCollectionItems]);

  if (collectionItemUrls && collectionItemUrls.length > 0) {
    return (
      <div className="collection-preview__overlay-thumbs">
        <div className="collection-preview__overlay-side" />
        <div className="collection-preview__overlay-grid">
          {collectionItemUrls &&
            collectionItemUrls.map((item, index) => {
              if (index < 2) {
                return (
                  <div className="collection-preview__overlay-grid-items">
                    <FileThumbnail uri={item} key={item} />
                  </div>
                );
              }
            })}
        </div>
      </div>
    );
  }
  return null;
}

export default withRouter(CollectionPreviewOverlay);