import * as React from 'react';

import { Icons } from '../index';
import { ParentSlider, Wrapper, Container, Slide, ArrowLeft, ArrowRight } from './Slider.styled';

interface IProps {
  children: React.ReactNode|[]|any;
}

interface IState {
  currentIndex?: number;
  translateValue?: number;
}

export default class Slider extends React.PureComponent<IProps, IState> {
  static Slide = Slide;

  state = {
    currentIndex: 0,
    translateValue: 0,
  };

  goToNextSlide = () => {
    const { currentIndex } = this.state;
    const { children } = this.props;
    if (currentIndex === (children.length)) {
      return this.setState({ currentIndex: 0, translateValue: 0 });
    }

    this.setState((prevState: { currentIndex: number; translateValue: number }) => ({
      currentIndex: prevState.currentIndex + 1,
      translateValue: prevState.translateValue + -(this.slideWidth()),
    }));
  }

  goToPrevSlide = () => {
    this.setState((prevState: { currentIndex: number; translateValue: number }) => ({
      currentIndex: prevState.currentIndex - 1,
      translateValue: prevState.translateValue - -(this.slideWidth()),
    }));
  }

  slideWidth = () => (document.querySelector('.slide') as HTMLElement).clientWidth;

  render () {
    const { translateValue, currentIndex } = this.state;
    return (
      <ParentSlider>
        <Wrapper translate={translateValue}>
          <Container>
            {this.props.children}
          </Container>
        </Wrapper>
        { currentIndex > 0 && <ArrowLeft onClick={this.goToPrevSlide}>
          <Icons.Arrow degree={270} />
        </ArrowLeft> }
        <ArrowRight onClick={this.goToNextSlide}>
          <Icons.Arrow degree={90} />
        </ArrowRight>
      </ParentSlider>
    );
  }
}