import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { FluidObject } from 'gatsby-image';
import { css } from '@emotion/core';
import { Text } from '@rebass/emotion';

import { FluidContainer } from 'utils/styles/mixins';
import { MultiImageModuleProps } from '../../../multi-image-module.types';

import { space, fontSizes, lineHeights } from 'utils/theme';
import { SiteTheme } from 'lib';
import { ShowOnLarge, ShowOnTabletDown } from 'utils/styles/display';

import Typography from 'utils/typography';

import * as Styles from './multi-image-module-cosmos-grid.styles';

interface MultiImageModuleState {
  slideNumber: number;
  showCarousel: boolean;
}

class MultiImageModuleCosmosGrid extends Component<MultiImageModuleProps, MultiImageModuleState> {
  state = {
    slideNumber: 0,
    showCarousel: false
  };

  handleImageSelected = (index: number): void => {
    const { data: { images, layoutOption } } = this.props;
    this.props.uiStore!.lightBoxImageIndex = index;
    this.props.uiStore!.lightBoxImages = images.map(image => ({ src: image.fluid.src }));
    this.props.uiStore!.lightBoxLayoutId = layoutOption;
    this.props.uiStore!.toggleLightbox();
  }

  renderImage = (fluid: FluidObject, index: number, alt: string | undefined): JSX.Element => {
    return (
      <Styles.ImageContainer key={index} onClick={(): any => this.handleImageSelected(index)}>
        <Styles.Image fluid={fluid} key={index} alt={alt}/>
      </Styles.ImageContainer>
    );
  }

  renderDesktopImageColumns = (processedImages: any[]): JSX.Element => {
    const firstColumnImages: any[] = [];
    const secondColumnImages: any[] = [];
    const { data: {
      images
    } } = this.props;

    processedImages.map((image, index) => {
      index % 2 ? secondColumnImages.push(image) : firstColumnImages.push(image);

      return image;
    });

    return (
      <>
        <Styles.Column
          css={css`
            margin-right: ${space.large / 2}px;
          `}
        >
          {firstColumnImages.map((image: any) => this.renderImage(image.fluid, images.indexOf(image), image.alt))}
        </Styles.Column>
        <Styles.Column
          css={css`
            margin-left: ${space.large / 2}px;
          `}
        >
          {secondColumnImages.map((image: any) => this.renderImage(image.fluid, images.indexOf(image), image.alt))}
        </Styles.Column>
      </>
    );
  }

  render(): JSX.Element {
    const {
      data: {
        images,
        titleTextColour,
        title,
        body
      }
    } = this.props;

    return (
      <>
      <FluidContainer>
        <Styles.Module
          css={css`
            opacity: ${this.state.showCarousel ? 0.05 : 1};
          `}
        >
          <Styles.CopyContainer>
            <Text
              color={SiteTheme.setColour(titleTextColour, 'black')}
              fontSize={[fontSizes.xxxLarge]}
              lineHeight={[lineHeights.xxxLarge]}
              fontFamily={Typography.options.bodyFontFamily}
              mb={[`${space.small}px`]}
            >
              {title}
            </Text>
            <Text
              color={SiteTheme.setColour(titleTextColour, 'black')}
              fontSize={[fontSizes.base]}
              lineHeight={[lineHeights.xLarge]}
              fontFamily={Typography.options.bodyFontFamily}
            >
              {body}
            </Text>
          </Styles.CopyContainer>
          <ShowOnTabletDown>
            <Styles.Column>
            {images.map(({ fluid, alt }, index) => {
              return this.renderImage(fluid, index, alt);
            })}
            </Styles.Column>
          </ShowOnTabletDown>
          <ShowOnLarge>
            <Styles.ColumnContainer>
            {this.renderDesktopImageColumns(images)}
            </Styles.ColumnContainer>
          </ShowOnLarge>
        </Styles.Module>
      </FluidContainer>
      </>
    );
  }
}

export default inject('uiStore')(observer(MultiImageModuleCosmosGrid));