import React from 'react';
import {Motion, spring} from 'react-motion';
import './index.scss';

let pics = ['0y92si4ZLyA.jpg','	2rAPafS-FnE.jpg','	5pkYWUDDthQ.jpg','FNFxhDQerzQ.jpg','Tyj6hWBk4Po.jpg','aROMj0RT9DU.jpg'];

const springSettings = {stiffness: 170, damping: 26};
const NEXT = 'show-next';

export default class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    //   photos: [[500, 350], [800, 600], [800, 400], [700, 500], [200, 650], [600, 600]],
      photos: new Array(6).fill([500,350]),
      currPhoto: 0,
    };
  };

  handleChange = ({target: {value}}) => {
    this.setState({currPhoto: value});
  };

  clickHandler = (btn) => {
    let photoIndex = btn === NEXT ? this.state.currPhoto+1 : this.state.currPhoto-1;

    photoIndex = photoIndex >= 0 ? photoIndex : this.state.photos.length - 1;
    photoIndex = photoIndex >= this.state.photos.length ? 0 : photoIndex;

    this.setState({
      currPhoto: photoIndex
    })
  };

  componentDidMount(){
      setInterval(e => {
        this.clickHandler(NEXT)
      },2500);
  }

  render() {
    const {photos, currPhoto} = this.state;
    const [currWidth, currHeight] = photos[currPhoto];

    const widths = photos.map(([origW, origH]) => currHeight / origH * origW);

    const leftStartCoords = widths
      .slice(0, currPhoto)
      .reduce((sum, width) => sum - width, 0);

    let configs = [];
    photos.reduce((prevLeft, [origW, origH], i) => {
      configs.push({
        left: spring(prevLeft, springSettings),
        height: spring(currHeight, springSettings),
        width: spring(widths[i], springSettings),
      });
      return prevLeft + widths[i];
    }, leftStartCoords);

    return (
      <div className="gallery">
        {/* <div>Scroll Me</div>
        <button onClick={this.clickHandler.bind(null, '')}>Previous</button>
        <input
          type="range"
          min={0}
          max={photos.length - 1}
          value={currPhoto}
          onChange={this.handleChange} />
        <button onClick={this.clickHandler.bind(null, NEXT)}>Next</button> */}
        <div className="photo">
          <Motion style={{height: spring(currHeight), width: spring(currWidth)}}>
            {container =>
              <div className="photo-inner" style={container}>
                {configs.map((style, i) =>
                  <Motion key={i} style={style}>
                    {style =>
                      <img className="photo-src" src={`https://file.ourfor.top/album/${pics[i]}`} style={style} />
                    }
                  </Motion>
                )}
              </div>
            }
          </Motion>
        </div>
      </div>
    );
  };
}