import React, { Component } from 'react';
import Img from 'gatsby-image';

import { FluidContainer } from 'utils/styles/mixins';
import Slider from 'react-slick';

import { SliderConfig } from './multi-image-module-begonia-default.constants'

import SliderControls from 'components/slider-controls'

import * as Styles from './multi-image-module-begonia-default.styles'

import { MultiImageModuleProps } from '../../../multi-image-module.types';
import { ProgressBarOrientation } from 'components/slider-controls/progress-controls/components/progress-bar.types';
import { colors } from 'utils/theme';
import { ShowOnLarge, ShowOnTabletDown } from 'utils/styles/display'
import { SiteTheme } from 'lib';

type MultiImageModuleState = {
  currentSlideNumber: number;
}

class MultiImageModuleBegoniaDefault extends Component<MultiImageModuleProps, MultiImageModuleState> {
  state = {
    currentSlideNumber: 0
  }

  slider: any = null

  updateSliderNumber = (slideNumber: number) => this.setState({ currentSlideNumber: slideNumber })

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

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

  renderControls = (orientation: ProgressBarOrientation, colour: string): JSX.Element => {
    const { data: { images, layoutOption } } = this.props
    return (
      <SliderControls
        currentSlide={this.state.currentSlideNumber + 1}
        maxSlides={images.length}
        orientation={orientation}
        layoutId={layoutOption}
        onNext={() => this.handleNext()}
        onPrevious={() => this.handlePrevious()}
        colour={colour}
        controlsEnabled
      />
    )
  }

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

  render() {
    const { data: { images, iconColour, titleTextColour } } = this.props
    const processedIconColour = SiteTheme.setColour(iconColour, 'white');
    const config = {
      ...SliderConfig.slider,
      afterChange: (next: number) => setTimeout(() => this.updateSliderNumber(next), 10),
    }
    return (
      <FluidContainer>
        <Styles.Module>
          <Styles.ImageContainer>
            <ShowOnTabletDown>
              <Styles.ControlsContainer>
                {this.renderControls(ProgressBarOrientation.HORIZONTAL, processedIconColour)}
              </Styles.ControlsContainer>
            </ShowOnTabletDown>
            <Styles.SliderContainer>
              <Slider ref={c => (this.slider = c)} {...config}>
              {
                images.map(({ alt, fluid }, index) => {
                  return (
                    <Styles.SlideContainer key={index}>
                      <Img alt={alt} key={index} fluid={fluid} />
                    </Styles.SlideContainer>
                  )
                })
              }
              </Slider>
              <Styles.CaptionContainer>
                {images.map(({title}, index) =>
                  title ? this.renderCaption(
                    title,
                    index === this.state.currentSlideNumber,
                    index,
                    titleTextColour ? colors[titleTextColour.key] : colors.white
                  ) : null)}
              </Styles.CaptionContainer>
            </Styles.SliderContainer>
          </Styles.ImageContainer>
          <ShowOnLarge>
            <Styles.ControlsContainer>
            {this.renderControls(ProgressBarOrientation.VERTICAL, processedIconColour)}
            </Styles.ControlsContainer>
          </ShowOnLarge>
        </Styles.Module>
      </FluidContainer>
    )
  }
}

export default MultiImageModuleBegoniaDefault