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

export default class AddTestItem extends Component {
  constructor(props){
    super(props);
    this.state = {
      question: '',
      answerCount: [{value: '',rating:0},{value: '',rating:0}],
    }

  }
  render(){

    return(
      <div className="add-test-item">
        <div className="question-input-wrapper">
          <span className="question-counter">{this.props.questionNumber}.</span>
          <input className ="question-input" value={this.state.question} onInput={this.questionChange} ref="question" type="text" placeholder="enter the question.."/>
          <FontAwesome name="question" className="question-mark" />
        </div>
        {
          this.state.answerCount.map((item,i)=>{
            return (<div  className="answer-input-wrapper" key={i}>
              <FontAwesome name="circle-o" className="answer-circle"/>
              <input onChange={this.sendData} placeholder="" value={item.value} onInput={(e)=>this.inputChange(i,e)} className ="answer-input" type="text"/>
              <div className="question-rating">
                <div className="question-rating-number">{item.rating}</div>
                <div className="question-rating-buttons">
                  <div className="question-rating-button" onClick={()=>this.ratingUp(i)}><FontAwesome name="angle-up" /></div>
                  <div className="question-rating-button" onClick={()=>this.ratingDown(i)}><FontAwesome name="angle-down" /></div>
                </div>
              </div>
              <FontAwesome onClick={()=>this.deleteAnswer(i)} name='times' className="icon"/>
            </div>)
          })
        }
        <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} type="button" onClick={this.addAnswer}>Add answer</button>
      </div>
    )
  }
  //custom methods

  ratingUp = (i) => {
    var newAnswerCount = this.state.answerCount;
    if(newAnswerCount[i].rating != 4){
      newAnswerCount[i].rating += 1;
      this.setState({answerCount: newAnswerCount})
    }
    setTimeout(()=>{
        this.props.takeInfo(this.state,this.props.questionNumber);
    },100)
  }
  ratingDown = (i) => {
    var newAnswerCount = this.state.answerCount;
    if(newAnswerCount[i].rating != 0){
      newAnswerCount[i].rating -= 1;
      this.setState({answerCount: newAnswerCount})
    }
    setTimeout(()=>{
        this.props.takeInfo(this.state,this.props.questionNumber);
    },100)
  }
  addAnswer = () => {
    this.setState((prevState,props)=>({answerCount: prevState.answerCount.concat({value: '',rating: 0})}));
  }
  deleteAnswer = (i) => {
    this.setState((prevState)=>({answerCount: prevState.answerCount.filter((item,index)=>(i!=index))}))
  }
  inputChange = (i,e) => {
    var arr = this.state.answerCount;
    arr[i].value = e.target.value;
    this.setState({answerCount: arr});
    setTimeout(()=>{
        this.props.takeInfo(this.state,this.props.questionNumber);
    },100)
  }
  questionChange = (e) => {
    this.setState({question: e.target.value});
    setTimeout(()=>{
        this.props.takeInfo(this.state,this.props.questionNumber);
    },100)
  }


}
