import React from 'react';
import Lightbox, { Image } from 'react-images';
import Img from 'gatsby-image';
import { Box } from '@rebass/emotion';

import { FluidContainer } from 'utils/styles/mixins';

import { MultiImageModuleProps } from '../multi-image-module.types';
import { GridLayoutState } from './grid-layout.types';
import { LightboxTheme } from './grid-layout.constants';
import * as Styles from './grid-layout.styles';

class GridLayout extends React.Component<
  MultiImageModuleProps,
  GridLayoutState
> {
  constructor(props: MultiImageModuleProps) {
    super(props);

    this.state = {
      lightbox: false,
      currentImage: 0,
      images: this.buildLightboxImages()
    };
  }

  buildLightboxImages = (): Image[] =>
    this.props.data.images.map(image => ({
      src: image.fluid.src,
      srcset: image.fluid.srcSet.split(','),
      caption: image.alt
    }))

  openLightbox = (
    currentImage: number,
    event: React.MouseEvent<HTMLAnchorElement>
  ): void => {
    event.preventDefault();

    this.setState({
      lightbox: true,
      currentImage
    });
  }

  onClickPrev = (): void =>
    this.setState({
      currentImage: this.state.currentImage - 1
    })

  onClickNext = (): void =>
    this.setState({
      currentImage: this.state.currentImage + 1
    })

  onClose = (): void => {
    this.setState({
      lightbox: false
    });
  }

  render(): JSX.Element {

    return (
      <FluidContainer>
        <Styles.Gridlayout flexWrap="wrap">
          {
            this.props.data.images.map((image, index) => (
              <Box
                p="10px"
                width="100%"
                key={image.id}
              >
                <a
                  href={image.fluid.src}
                  onClick={(e): void => this.openLightbox(index, e)}
                >
                  <Img
                    key={index}
                    fluid={image.fluid}
                    style={{maxHeight: '600px'}}
                  />
                </a>
              </Box>
            ))
          }
        </Styles.Gridlayout>
        <Lightbox
          backdropClosesModal={true}
          images={this.state.images}
          currentImage={this.state.currentImage}
          isOpen={this.state.lightbox}
          theme={LightboxTheme}
          onClickPrev={this.onClickPrev}
          onClickNext={this.onClickNext}
          onClose={this.onClose}
        />
      </FluidContainer>
    );
  }
}

export default GridLayout;