import React from 'react';
import ImageLoader from '../ImageLoader'
import ImageViewer from '../ImageViewer'

interface ImageLoaderProps {
  height: string;
  width: string,
  divStyle: React.CSSProperties;
}
export interface ImageGalleryProps {
  urls: string[];
  imageLoaderProps: ImageLoaderProps;
  wrapperStyle: React.CSSProperties;
}

interface ImageGalleryState {
  index: number;
  isOpen: boolean;
}

export default class ImageGallery extends React.Component<ImageGalleryProps, ImageGalleryState> {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      isOpen: false,
    }
  }

  handleClick = (idx: number) => {
    this.setState({ index: idx, isOpen: true })
  }

  handleClose = () => {
    this.setState({ isOpen: false })
  }

  render() {
    const { urls, imageLoaderProps, wrapperStyle, } = this.props;
    const { isOpen, index } = this.state;
    const defaultImageLoaderProps = {
      width: '90px',
      height: '90px',
      divStyle: {
        textAlign: 'center',
      },
      ...imageLoaderProps,
    };
    const defaultWrapperStyle = {
      padding: 6,
      background: 'white',
      border: '1px solid #eee',
      borderRadius: 4,
      display: 'inline-block',
      margin: 6
    }

    return (
      <>
        {
          urls.map((url, idx) => (
            <div style={defaultWrapperStyle} key={url} >
              <ImageLoader onClick={() => this.handleClick(idx)} url={url} {...defaultImageLoaderProps} />
            </div>
          ))
        }
        {isOpen ? <ImageViewer urls={urls} index={index} onClose={this.handleClose} /> : null}
      </>
    );
  }
}
