import React, { Component } from 'react';
import Img, { FluidObject } from 'gatsby-image';
import { Text, Box } from '@rebass/emotion';
import Slider from 'react-slick';

import { FluidContainer } from 'utils/styles/mixins';
import { SliderConfig } from './multi-image-module-cosmos-slider.constants';
import { MultiImageModuleProps } from '../../../multi-image-module.types';
import { HTMLService, SiteTheme } from 'lib';
import { colors, fontSizes, lineHeights, space } from 'utils/theme';
import { ShowOnLarge, ShowOnTabletDown, ShowOnSmall, ShowOnTabletOnly } from 'utils/styles/display';

import SliderControls from 'components/slider-controls';

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

interface MultiImageModuleState {
  currentSlideNumber: number;
  controlsEnabled: boolean;
}

class MultiImageModuleCosmosDefault extends Component<MultiImageModuleProps, MultiImageModuleState> {
  state = {
    currentSlideNumber: 0,
    controlsEnabled: true
  };

  slider: any = null;

  updateSliderNumber = (slideNumber: number): void => {
    this.setState({
      currentSlideNumber: slideNumber,
      controlsEnabled: true
    });
  }

  handleNext = (): void => {
    const { data: { images } } = this.props;
    this.setState(({ currentSlideNumber: previousSlideNumber }) => {
      return {
        currentSlideNumber: previousSlideNumber + 1 >= images.length ? 0 : previousSlideNumber + 1,
        controlsEnabled: false
      };
    });
    this.slider.slickNext();
  }

  handlePrevious = (): void => {
    const { data: { images } } = this.props;
    this.setState(({ currentSlideNumber: previousSlideNumber }) => {
      return {
        currentSlideNumber: previousSlideNumber - 1 < 0 ? images.length - 1 : previousSlideNumber - 1,
        controlsEnabled: false
      };
    });
    this.slider.slickPrev();
  }

  renderCaption = (txt: string, visible: boolean, index: number, colour: string): any => {
    return (
      <Styles.Caption
        key={index}
        colour={colour}
        opacity={visible ? 1 : 0}
      >
        {txt}
      </Styles.Caption>
    );
  }

  renderImage = (fluid: FluidObject, index: number, alt: string | undefined, height: number): JSX.Element => {
    return (
      <Img
        fluid={fluid}
        key={index}
        alt={alt}
        style={{
          height,
          objectFit: 'contain'
        }}
      />
    );
  }

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

    const config = {
      ...SliderConfig,
      afterChange: (next: number): number => setTimeout(() => this.updateSliderNumber(next), 10)
    };

    return (
      <FluidContainer>
        <Styles.Module>
          <ShowOnTabletDown>
            <Text
              mt={10}
              fontSize={[fontSizes.xLarge]}
              lineHeight={[lineHeights.xxLarge]}
            >
              {title}
            </Text>
            <Text
              my={15}
              fontSize={[fontSizes.base]}
              lineHeight={[lineHeights.xLarge]}
              dangerouslySetInnerHTML={{
                __html: HTMLService.htmlFromMarkdown(body)
              }}
            />
          </ShowOnTabletDown>
          <Slider ref={(c): any => (this.slider = c)} {...config}>
          {
            images.map((img, index) => {
              const { alt, fluid } = img;

              return (
                <Box key={index}>
                  <ShowOnSmall>{this.renderImage(fluid, index, alt, 300)}</ShowOnSmall>
                  <ShowOnTabletOnly>{this.renderImage(fluid, index, alt, 500)}</ShowOnTabletOnly>
                  <ShowOnLarge>{this.renderImage(fluid, index, alt, 700)}</ShowOnLarge>
                </Box>
              );
            }
            )}
          </Slider>
          <ShowOnLarge>
            <Styles.ControlsContainer>
              <SliderControls
                currentSlide={this.state.currentSlideNumber + 1}
                maxSlides={images.length}
                onNext={this.handleNext}
                onPrevious={this.handlePrevious}
                controlsEnabled={this.state.controlsEnabled}
                colour={SiteTheme.setColour(iconColour, 'black')}
                layoutId={layoutOption}
              />
            </Styles.ControlsContainer>
          </ShowOnLarge>
            <Styles.CaptionContainer>
              <ShowOnTabletDown>
                <Text
                  fontSize={[fontSizes.base]}
                  lineHeight={[lineHeights.xLarge]}
                  mr={space.small}
                  mt={space.xxsmall}
                >2 of 4
                </Text>
              </ShowOnTabletDown>
              <ShowOnLarge>
                {images.map(({ title: imgTitle }, index) =>
                  imgTitle ? this.renderCaption(
                    imgTitle,
                    index === this.state.currentSlideNumber,
                    index,
                    titleTextColour ? colors[titleTextColour.key] : colors.white
                  ) : null)}
              </ShowOnLarge>
            </Styles.CaptionContainer>
        </Styles.Module>
      </FluidContainer>
    );
  }
}

export default MultiImageModuleCosmosDefault;