import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ImageZoom from 'react-medium-image-zoom';
import { getFileByEventId } from '../../api/icat/icatPlus';

export default class GalleryDatasetThumbnail extends Component {
  render() {
    let gallery = this.props.dataset.parameters.filter(
      (o) => o.name === 'ResourcesGallery'
    );

    if (gallery != null) {
      if (gallery.length > 0) {
        gallery = gallery[0].value.split(' ');
        if (gallery.length > this.props.index) {
          const url = getFileByEventId(
            this.props.sessionId,
            this.props.dataset.investigation.id,
            gallery[this.props.index]
          );
          return (
            <ImageZoom
              image={{
                src: url,
                //alt: "test",
                className: 'thumbnail',
                style: { width: '100%' },
              }}
            />
          );
        }
      }
    }
    return null;
  }
}

GalleryDatasetThumbnail.propTypes = {
  sessionId: PropTypes.string.isRequired,
  index: PropTypes.number.isRequired,
  dataset: PropTypes.object.isRequired,
};
