import React, { Component } from 'react';
import { Router, Route, Link, NavLink} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import { connect } from 'react-redux';
import TestComponentItem from './TestComponentItem';
import FontAwesome from 'react-fontawesome';

class TestComponent extends Component {
  constructor(props){
    super(props);
    this.state = {
      readMore: false,
      showReadMoreControls: false,
      showResults: false,
      answerArray: [],
      selectedArray: [],
      answerNumber: '',
      questionNumber: 0,
      zIndex: 1,
      zIndex2: 0,
      questionNumber2: 0,
      testObject: this.props.tests[+this.props.match.params.id]
    }
  }
  render(){

      if(this.state.readMore){
        var isReadMore = (
          <div className="read-more-text">
            {this.state.testObject.readMore}
            <div><FontAwesome name="angle-up" onClick={()=>{this.readMoreUp()}}/></div>
          </div>);
      }else{
        var isReadMore = (
          <div>
            <span>Read more about {this.state.testObject.keyword}</span>
            <FontAwesome name="angle-down" onClick={()=>{this.readMoreDown()}}/>
          </div>
        );
      }


    window.TestComponentState = this.state;
      if(this.state.showResults){
        return(
          <div className="results-block">
              <div className="result-text">
                Your score as a percentage for <span>{this.state.testObject.keyword}</span>:
              </div>
              <div className="result-number">
                {this.state.answerNumber}%
                <FontAwesome name="circle-thin" />
              </div>
              <div className="result-slider">
                <div className="result-slider-line" style={{width: `${this.state.answerNumber}%`}}></div>
              </div>
              <div ref="readMore" className="read-more" style={ this.state.showReadMoreControls ? {maxHeight: '90px', opacity: '1'} : {}}>
                {isReadMore}
              </div>
          </div>
        )
      }
      else{
        return(
          <div className="test-component">
            <TestComponentItem showResults={this.showResults} questionsLength={this.state.testObject.questions.length} answerArray={this.state.selectedArray} answer={this.answer} nextQuestion={this.nextQuestion} questionNumber={this.state.questionNumber2} zIndex={this.state.zIndex2} changeZIndex={this.changeZIndex} info={this.state.testObject.questions[this.state.questionNumber2]} />
            <TestComponentItem showResults={this.showResults} questionsLength={this.state.testObject.questions.length} answerArray={this.state.selectedArray} answer={this.answer} nextQuestion2={this.nextQuestion2} questionNumber={this.state.questionNumber} zIndex={this.state.zIndex} changeZIndex={this.changeZIndex} info={this.state.testObject.questions[this.state.questionNumber]} />
          </div>
        )
      }
  }
  //custom functions
  showResults = (canIClick) => {
    if(canIClick){
      this.setState({showResults: true});
      this.resultScore();
    }
  }
  nextQuestion = () => {
    this.setState((prevState)=>({questionNumber: prevState.questionNumber + 2}))
  }
  nextQuestion2 = () => {
    if(this.state.questionNumber == 0){
      this.setState((prevState)=>({questionNumber2: ++prevState.questionNumber2}))
    }
    else{
      this.setState((prevState)=>({questionNumber2: prevState.questionNumber2 + 2}))
    }

  }
  changeZIndex = () => {
    if(this.state.zIndex == 1){
      this.setState({zIndex: 0,zIndex2: 1});
    }
    else{
      this.setState({zIndex: 1,zIndex2: 0})
    }
  }
  answer = (questionNumber,res,i) => {
    // e.target.previousSibling.className = 'answer-circle answer-circle-active';
    var arr = this.state.answerArray;
    var arr2 = this.state.selectedArray;
    arr[questionNumber] = res;
    arr2[questionNumber] = i;
    this.setState({answerArray: arr});
  }
  resultScore = (i = 0) => {
    var totalScore = this.state.answerArray.reduce((item1,item2)=>{
      return item1 + item2;
    })
    var percentage = Math.floor(totalScore / (this.state.testObject.questions.length * 4) * 100); // works if only i have 5 questions in each test
    this.setState({answerNumber: i});
    if(i < percentage){
      setTimeout(()=>{
        this.resultScore(++i);
      },50)
    } else{
      setTimeout(()=>{
        this.setState({showReadMoreControls: true});
      },500)
    }
  }
  readMoreDown = () => {
        this.refs.readMore.style.opacity = '0';
      setTimeout(()=>{
        this.refs.readMore.style.transition = 'opacity 1s, max-height 4s ease'
        this.refs.readMore.style.maxHeight = '800px';
        this.setState({readMore: true});
        this.refs.readMore.style.opacity = '1';
      },1000)
      if(document.documentElement.scrollTop || document.body.scrollTop == 0){
        setTimeout(()=>{
          this.scrollDown(document.documentElement.scrollTop || document.body.scrollTop)
        },1300)
      }
  }
  readMoreUp = (i) => {
      this.refs.readMore.style.maxHeight = '90px';
      this.refs.readMore.style.opacity = '0';
      setTimeout(()=>{
        if(this.refs.readMore){
          this.setState({readMore: false});
          this.refs.readMore.style.opacity = '1';
        }
      },4000)
      // if(i == document.documentElement.scrollTop || document.body.scrollTop){
      //   this.setState({readMore: false});
      // }
      // window.scrollTo(0, i);
      // if(i < document.body.scrollHeight){
      //   setTimeout(()=>{
      //     this.readMoreDown(i - 3);
      //   },3)
      // }
  }
  scrollDown = (i) => {
      window.scrollTo(0, i);
      if(i < document.body.scrollHeight){
        setTimeout(()=>{
          this.scrollDown(i + 3);
        },1)
      }

  }
}

const mapStateToProps = (state) => {
  return {
    tests: state,
  }
}

export default connect(mapStateToProps)(TestComponent);

// if(i < document.body.scrollHeight){
//   if(i / document.body.scrollHeight > 0.2){
//     setTimeout(()=>{
//       this.readMore(i + 1);
//       console.log(`from decelerate ${2 * (1 + 4 * (i / document.body.scrollHeight)*(i / document.body.scrollHeight))}`)
//     },2 * (1 + 4 * (i / document.body.scrollHeight)*(i / document.body.scrollHeight)))
//   } else{
//     setTimeout(()=>{
//       this.readMore(i + 1);
//       console.log(`from accelerate ${5 - (1 + 4 * (i / document.body.scrollHeight)*(i / document.body.scrollHeight))}`)
//     },5 - (1 + 4 * (i / document.body.scrollHeight)*(i / document.body.scrollHeight)))
//   }
// }