import React from 'react';
import StyledWrapper from './styled';
import { Spring } from 'react-spring/renderprops';
import Hammer from 'react-hammerjs';


export default class extends React.Component {

  static defaultProps = {
    items: [
      { src: '/assets/corgi.jpg' },
      { src: '/assets/bulldog.jpg' },
      { src: '/assets/golden.jpg' },
      { src: '/assets/terrier.jpg' },
      { src: '/assets/puppy.jpg' },
    ]
  }
  state = {
    currentIndex: 0,
    isPressed: false,
    pressedX: 0,
    translateX: 0,
    currentTranslateX: 0,
  }

  handleTouchStart = (e) => {
    this.handleMouseDown(e.touches[0]);
  }



  handleMouseDown = (e) => {
    this.setState({
      pressedX: e.clientX,
      isPressed: true,
      currentTranslateX: this.state.translateX,
    });

    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('touchmove', this.handleTouchMove);
    document.addEventListener('mouseup', this.handleMouseUp);
    document.addEventListener('touchend', this.handleMouseUp);

  }

  handleTouchMove = e => {
    this.handleMouseMove(e.touches[0]);
  }

  handleMouseMove = (e) => {
    if (this.state.isPressed) {
      const moveX = e.clientX - this.state.pressedX;
      this.setState({
        translateX: this.state.currentTranslateX + moveX,
      })
    }
  }

  handleMouseUp = (e) => {
    const windowWidth = window.innerWidth;
    console.log({ windowWidth, translateX: this.state.translateX });

    this.setState({
      isPressed: false,
    });

    const targetIndex = Math.round(-this.state.translateX / windowWidth);
    this.goToSlide(targetIndex);

    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('touchmove', this.handleTouchMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
    document.removeEventListener('touchend', this.handleMouseUp);
  }

  handleSwipe = e => {
    console.log('swipe', e.velocityX);
    if (e.velocityX < -0.5) this.goNext();
    if (e.velocityX > 0.5) this.goPrev();
  }

  goToSlide = targetIndex => {
    console.log('goToSlide', targetIndex);
    const windowWidth = window.innerWidth;

    this.setState({
      currentIndex: targetIndex,
      translateX: -targetIndex * windowWidth,
    })
  }

  goNext = e => {
    console.log('goNext');
    this.goToSlide(this.state.currentIndex + 1);
  }

  goPrev = e => {
    console.log('goPrev');
    this.goToSlide(this.state.currentIndex - 1);
  }

  render() {
    const { items } = this.props;
    const { translateX, isPressed } = this.state;
    return (
      <Hammer
        onSwipe={this.handleSwipe}
      >
        <StyledWrapper>
          <div className={`slider-wrapper`}>
            <Spring config={{ tension: 260, friction: 26 }}  to={{ translateX }}>
              {props => {
                return (
                  <div
                    className={`slider-item-container ${isPressed ? 'dragging' : ''}`}
                    style={{
                      ...props,
                      transform: `translateX(${props.translateX}px)`
                    }}
                    onMouseDown={this.handleMouseDown}
                    onTouchStart={this.handleTouchStart}
                    // onMouseMove={this.handleMouseMove}
                    // onMouseUp={this.handleMouseUp}
                  >
                    {items.map(item => (
                      <div className="slider-item" key={item.src}>
                        <img src={item.src} alt="" draggable={false} />
                      </div>
                    ))}
                  </div>
                )
              }}
            </Spring>
          </div>
        </StyledWrapper>
      </Hammer>
    );
  }
}