import { Component, Fragment } from 'react';
import { translate } from 'react-i18next';

import { SectionTitle } from '../SectionTitle/SectionTitle';
import getId from '../../lib/idGenerator';
import styles from './Portfolio.scss';

const ProjectTile = props => (
  <div
    role="button"
    className={ props.tileClasses }
    data-id={ props.dataKey }
    onClick={ props.onTileClick }
    onTouchEnd={ props.onTileClick }
    onAnimationEnd={ props.onAnimationEnd }
  >
    <div className={ styles.position }>
      <p>{ props.position }</p>
    </div>
    <div className={ [styles.tileBlock, props.activeTile ? styles.active : ''].join(' ') }>
      <div className={ styles.half }>
        <div className={ styles.titleWrap }>
          <p className={ styles.title }>{ props.title }</p>
        </div>
      </div>
      <div className={ styles.half }>
        <div className={ styles.descriptionWrap }>
          <div className={ styles.description }>
            { props.description.map(d => <p key={ getId() }>{ d }</p>) }
          </div>
          <p className={ styles.arrow }>></p>
        </div>
      </div>
    </div>
  </div>
);

class Portfolio extends Component {
  state = {
    tileClasses: [styles.projectTile],
    activeTile: null,
  }

  onProjectClick = e => {
    const target = e.currentTarget || e.target;
    const tileId = Number(target.attributes['data-id'].value);
    const classes = [...this.state.tileClasses, styles.animateSlide];

    this.setState({
      activeTile: tileId,
      tileClasses: classes,
    }, () => this.props.onSwipe(tileId - 1));
  }

  animateHandler = e => {
    const target = e.currentTarget || e.target;
    const tileId = Number(target.attributes['data-id'].value);
    const lastId = this.props.projects[this.props.projects.length - 1].id;

    if (tileId === lastId) {
      const tileClasses = [styles.projectTile, styles.hide];

      this.props.onSwipeMain(true);
      this.setState(
        { tileClasses },
        () => setTimeout(() => (
          this.setState({
            tileClasses: [styles.projectTile],
            activeTile: null,
          })
        ), 1000),
      );
    }
  }

  renderProjects = () => (
    this.props.projects.map(project => (
      <ProjectTile
        dataKey={ project.id }
        key={ getId() }
        position={ project.position }
        title={ project.title }
        description={ project.description.map(d => this.props.t(d)) }
        tileClasses={ this.state.tileClasses.join(' ') }
        onTileClick={ this.onProjectClick }
        onAnimationEnd={ this.animateHandler }
        activeTile={ this.state.activeTile === project.id }
      />
    ))
  );

  render() {
    return (
      <Fragment>
        <SectionTitle title={ this.props.t('main:portfolio-section') } />
        <div className={ styles.portfolioBlock }>
          <div className={ styles.projectWrapper }>
            { this.renderProjects() }
          </div>
        </div>
      </Fragment>
    );
  }
}

export default translate(['projects', 'main'])(Portfolio);