class Slide extends React.Component {
  constructor(props) {
    super(props);
    this.titleRef = React.createRef();
    this.contentRef = React.createRef();
  }
  handleAnimation = () => {
    const title = this.titleRef.current;
    const content = this.contentRef.current;
    title.classList.add("left");
    content.classList.add("fade");
  };
  handleNextClick = () => {
    this.handleAnimation();
    this.props.onNext();
  };
  handlePrevClick = () => {
    this.handleAnimation();
    this.props.onPrev();
  };

  componentDidUpdate() {
    const title = this.titleRef.current;
    const content = this.contentRef.current;
    setTimeout(() => {
      title.classList.remove("left");
      content.classList.remove("fade");
    }, 700);
  }
  render() {
    return (
      <div className="slide">
        <div className="slide__title">
          <h1 ref={this.titleRef}>{this.props.title}</h1>
        </div>
        <div className="slide__content" ref={this.contentRef}>
          <p className="slide__content--para">{this.props.children}</p>
        </div>
        <button
          className="slide__btn slide__btn--next"
          id="next"
          onClick={this.handleNextClick}
        >
          &gt;
        </button>
        <button
          className="slide__btn slide__btn--prev"
          id="prev"
          onClick={this.handlePrevClick}
        >
          &lt;
        </button>
      </div>
    );
  }
}
class SlideContainer extends React.Component {
  constructor(props) {
    super(props);
    document.addEventListener("keydown", (event) => {
      if (event.keyCode === 37) {
        this.prevHandler();
      } else if (event.keyCode === 39) {
        this.nextHandler();
      }
    });
    this.state = {
      slides: [
        {
          title: "Title 1",
          content:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, "
        },
        {
          title: "Title 2",
          content:
            "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',"
        },
        {
          title: "Title 3",
          content:
            "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum"
        }
      ],
      currentSlide: 0
    };
    this.nextHandler = this.nextHandler.bind(this);
    this.prevHandler = this.prevHandler.bind(this);
  }

  nextHandler() {
    this.setState((st) => ({
      ...st,
      currentSlide: (st.currentSlide + 1) % st.slides.length
    }));
  }
  prevHandler() {
    this.setState((st) => {
      let p = st.currentSlide - 1;
      if (p < 0) p = st.slides.length - 1;
      return {
        ...st,
        currentSlide: p
      };
    });
  }

  render() {
    const { currentSlide, slides } = this.state;
    return (
      <Slide
        title={slides[currentSlide].title}
        onNext={this.nextHandler}
        onPrev={this.prevHandler}
      >
        {slides[currentSlide].content}
      </Slide>
    );
  }
}

class App extends React.Component {
  render() {
    return <SlideContainer />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));