import React, { Component } from 'react';
import 'ba-styles/vendors/image-lightbox/image-lightbox.css';
import images from 'ba-api/imgData';
import { ImageLightbox } from 'ba-components';

import { Button, Grid } from '@material-ui/core';

export default class ImagePopup extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;

    return (
      <Grid
        container
        alignItems="center"
        justify="center"
        direction="column"
      >
        <Button variant="contained" color="secondary" onClick={() => this.setState({ isOpen: true })}>
          Open Image Lightbox
        </Button>

        {isOpen && (
          <ImageLightbox
            mainSrc={images[photoIndex].img}
            nextSrc={images[(photoIndex + 1) % images.length].img}
            prevSrc={images[(photoIndex + (images.length - 1)) % images.length].img}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() => this.setState({
              photoIndex: (photoIndex + (images.length - 1)) % images.length,
            })
            }
            onMoveNextRequest={() => this.setState({
              photoIndex: (photoIndex + 1) % images.length,
            })
            }
          />
        )}
      </Grid>
    );
  }
}