import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';

export default class TestComponentItem extends Component {
  constructor(props){
    super(props);
    this.state = {

      canIClick: true
    }
  }
  render(){
    return(
      <div ref="TestComponentItem" className="test-component-item" style={{zIndex: this.props.zIndex}}>
          <div className="item-component-item-header">
            <span className="test-component-item-number">{`${this.props.questionNumber + 1}. `}</span>
            <span className="test-component-question">{this.props.info.question}</span>
          </div>
          <div className="test-component-item-answers">
            {
              this.props.info.answerCount.map((item, i) => {
                return <div onClick={()=>{this.props.answer(this.props.questionNumber,item.rating,i)}} key={i}>
                  <FontAwesome name="circle-o" className={`answer-circle ${i == this.props.answerArray[this.props.questionNumber] ? 'answer-circle-active' : ''}`} id="icon"/>
                  <label htmlFor="icon">{item.value}</label>
                </div>
              })
            }
          </div>
          <div className="next-question">
            {
              this.props.questionsLength != this.props.questionNumber + 1 ? <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} onClick={this.nextQuestion} type="button">Next</button>:<button onClick={()=>{this.props.showResults(this.state.canIClick)}} type="button">Show results</button>
            }
          </div>
      </div>
    )
  }

  //custom functions

  nextQuestion = () => {
    if(this.state.canIClick){
      this.setState({canIClick: false});
      setTimeout(()=>{
        this.setState({canIClick: true});
      },2000)
      setTimeout(()=>{
        this.props.changeZIndex();
      },960)
      var classInterval = setTimeout(()=>{
        if(this.refs.TestComponentItem){
          this.refs.TestComponentItem.className = 'test-component-item';
        }

      },2000)
      if(this.props.questionNumber % 2 == 0){
        this.props.nextQuestion2();
      }
      else{
        this.props.nextQuestion();
      }
      this.refs.TestComponentItem.className = 'test-component-item test-component-animation';
    }
  }

}
