import React, { Component } from "react";

import "./slider.css";

export default class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slides: props.slides,
      timer: props.timer,
      curent: 0,
      curentTime: 0,
      sliderWidth:1000+"%",
      itemWidth: window.innerWidth, //"100vw"
      dots: null
    };
    this.handleAnimation = this.handleAnimation.bind(this);
    this.goLeft = this.goLeft.bind(this);
    this.goRight = this.goRight.bind(this);
    this.handleDotClick = this.handleDotClick.bind(this);
  }
  interval = null;
  componentWillReceiveProps = nextProps => {
    if (nextProps) {
      let go = {};
      if (nextProps.slides) {
        go.slides = nextProps.slides;
        go.sliderWidth = go.slides.length * 100;
        go.itemWidth = window.innerWidth;
         go.slides = go.slides.map((item, index) => (
           <div
            key={index}
            className="slide"
           // style={{ width: go.itemWidth + "px" }}
          >
             {item}
           </div>
       ));
        go.dots = go.slides.map((item, index) => (
          <span
            key={index}
            className={"dot" + ((index === 0 && " active") || "")}
          />
        ));
      }
      if (nextProps.timer) go.timer = nextProps.timer;
      this.setState(go, () => {
      });
    }
  };
  componentDidMount = async () => {
     let slide = await this.state.slides.map((item, index) => (
     <div
         key={index}
         className="slide"
         //style={{ width: "100vw" }}
         style={{ width: this.state.itemWidth + "px" }}

      >
        {item}
     </div>
     ));

    let dots = await this.state.slides.map((item, index) => (
      <span
        key={index}
        className={"dot" + ((index === 0 && " active") || "")}
      />
    ));
    this.setState({ slides: slide, dots });
  // this.setState({dots});
  };
  componentDidMount = () => {
    this.refs.wrap.style.transform = `translate(${this.state.itemWidth *
      this.state.curent}px)`;
    this.refs.wrap.style.transition = `transform 1s linear`;
    this.handleAnimation();
    this.interval = setInterval(this.handleAnimation, 1000);
  };

  handleAnimation = () => {
    let state = this.state;
    if (state.curentTime === state.timer[state.curent]) {
      this.refs.wrap.style.transform = `translate(-${this.state.itemWidth *
        this.state.curent}px)`;
      this.refs.wrap.style.transition = `transform 1000ms linear`;
      let dots = this.state.slides.map((item, index) => (
        <span
          id={"d" + index}
          key={index}
          className={"dot" + ((index === state.curent && " active") || "")}
          onClick={this.handleDotClick}
        />
      ));
      this.setState({
        curentTime: 0,
        curent: (this.state.curent + 1) % this.state.slides.length,
        dots
      });
    } else if (state.curentTime < state.timer[state.curent]) {
      state.curentTime++;
      this.setState(state);
    }
  };
  goRight = e => {
    let dots = this.state.slides.map((item, index) => (
      <span
        id={"d" + index}
        key={index}
        className={
          "dot" +
          ((index === (this.state.curent + 1) % this.state.slides.length &&
            " active") ||
            "")
        }
        onClick={this.handleDotClick}
      />
    ));
    this.refs.wrap.style.transform = `translate(-${window.innerWidth *
      ((this.state.curent + 1) % this.state.slides.length)}px)`;
    this.refs.wrap.style.transition = `transform 1000ms linear`;
    clearInterval(this.interval);
    this.setState(
      {
        curent: (this.state.curent + 1) % this.state.slides.length,
        curentTime: 0,
        dots
      },
      () => {
        this.interval = setInterval(this.handleAnimation, 1000);
      }
    );
  };
  goLeft = e => {
    let dots = this.state.slides.map((item, index) => (
      <span
        id={"d" + index}
        key={index}
        className={
          "dot" +
          ((index ===
            (this.state.curent + this.state.slides.length - 1) %
              this.state.slides.length &&
            " active") ||
            "")
        }
        onClick={this.handleDotClick}
      />
    ));
    this.refs.wrap.style.transform = `translate(-${window.innerWidth *
      ((this.state.curent + this.state.slides.length - 1) %
        this.state.slides.length)}px)`;
    this.refs.wrap.style.transition = `transform 1000ms linear`;
    clearInterval(this.interval);
    this.setState(
      {
        curent:
          (this.state.curent + this.state.slides.length - 1) %
          this.state.slides.length,
        curentTime: 0,
        dots
      },
      () => {
        this.interval = setInterval(this.handleAnimation, 1000);
      }
    );
  };
  handleDotClick = e => {
    let index = parseInt(e.target.id.slice(1));

    let dots = this.state.slides.map((item, dindex) => (
      <span
        id={"d" + dindex}
        key={dindex}
        className={"dot" + ((index === dindex && " active") || "")}
        onClick={this.handleDotClick}
      />
    ));
    this.refs.wrap.style.transform = `translate(-${window.innerWidth *
      index}px)`;
    this.refs.wrap.style.transition = `transform 1000ms linear`;
    clearInterval(this.interval);
    this.setState(
      {
        curent: index,
        curentTime: 0,
        dots
      },
      () => {
        this.interval = setInterval(this.handleAnimation, 1000);
      }
    );
  };
  render() {
    let slides = this.state.slides.map((item, index) => (
      <div
        key={index}
        className="slide"
        style={{ width: this.state.sliderWidth + "%", position: "relative"}}//+ "px" }}
      >
        {item}
      </div>
    ));
    return (
      <div className="slider">
        <div
          className="wrap"
          ref="wrap"
          style={{  width: this.state.sliderWidth ,position:"relative"}}//+ "%", position: "relative" }}
        >
          {slides}
        </div>
        <div className="dots">{this.state.dots}</div>
        <span className="left" onClick={this.goLeft} />
        <span className="right" onClick={this.goRight} />
      </div>
    );
  }
}