import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { addTest } from '../actions/index';
import { connect } from 'react-redux';
import AddTestItem from './AddTestItem';
import FontAwesome from 'react-fontawesome';

class AddTestComponent extends Component {
  constructor(props){
    super(props);
    this.state = {
      itemsCount: 1,
      testObject: {
        title: '',
        description: '',
        keyword: '',
        readMore: '',
        questions: [{},{}],
        imageInputValue: '',
      },
      isShowImg: true
    }
  }
  render(){
    window.AddTestStateQuestions = this.state.testObject.questions;
    return(
      <div className="add-test-component">
        <div className="add-test-container">
          <form onSubmit={this.submitForm} action="#">
            <div className="add-test-header">
              <span className="title-text">Enter the name of the test:</span>
              <input onInput={this.updateTitle} type="text" className="title-input"/>
              <span className="title-text">Enter the keyword:</span>
              <input onInput={this.updateKeyword} type="text" className="title-input"/>
              <span className="title-text">Read more:</span>
              <textarea onInput={this.updateReadMore} type="text" className="title-input"></textarea>
              <span className="title-text">Enter the description of the test:</span>
              <input onInput={this.updateDescription} type="text" className="description-input"/>
            </div>
            {
              [...Array(this.state.itemsCount)].map((item,i)=>{
                return (

                    <AddTestItem  key={i} questionNumber={++i} takeInfo={this.takeInfo.bind(this)}/>

                )
              })
            }

            <div className="submit-form">
              <div className="submit-inner-wrapper">
                <div className="question-edit-buttons">
                  <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} type="button" onClick={this.addQuestion}>Add question</button>
                  <button onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} type="button" onClick={this.deleteQuestion}>Delete question</button>
                </div>
                <div className="select-image">
                  <input onInput={this.imageInput} type="text" placeholder="enter the image url.."/>
                  {
                    this.state.isShowImg ? <img onError={this.imageError} ref="image" className="preview" style={{width: '75%'}} src={this.state.testObject.imageInputValue}/>: null
                  }
                </div>
              </div>
              <div className="send-input">
                <input onMouseUp={(e)=>{e.target.style.boxShadow = 'none'}} onMouseDown={(e)=>{e.target.style.boxShadow = 'inset 0 0 10px #cacaca'}} ref="submitButton" type="submit" value="Send"/>
              </div>
            </div>
          </form>
        </div>
      </div>
    )
  }
  // custom methods
  submitForm = (e) => {
    e.preventDefault();
    this.props.addTest(this.state.testObject);
  }
  takeInfo(receivedData,index) {
    index--;
    console.log(receivedData);
    var object = this.state.testObject;
    object.questions[index] = receivedData;
    this.setState({testObject: object});
  }
  updateTitle = (event) => {
    var object = this.state.testObject;
    object.title = event.target.value;
    this.setState({testObject: object});
  }
  updateDescription = (event) => {
    var object = this.state.testObject;
    object.description = event.target.value;
    this.setState({testObject: object});
  }
  updateKeyword = (event) => {
    var object = this.state.testObject;
    object.keyword = event.target.value;
    this.setState({testObject: object});
  }
  updateReadMore = (event) => {
    var object = this.state.testObject;
    object.readMore = event.target.value;
    this.setState({testObject: object});
  }
  imageInput = (event) => {
    var object = this.state.testObject;
    object.imageInputValue = event.target.value;
    this.setState({testObject: object});
    this.setState({isShowImg: true})
  }
  imageError = () => {
    this.setState({isShowImg: false})
  }
  addQuestion = () => {
    this.setState((prevState,props)=>({itemsCount: ++prevState.itemsCount}));
  }
  deleteQuestion = () => {
    var object = this.state.testObject;
    object.questions.pop();
    this.setState({testObject: object});
    this.setState((prevState,props)=>({itemsCount: --prevState.itemsCount}));
  }
}


const mapStateToProps = (state) => {
  return {
    tests: state,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    addTest: bindActionCreators(addTest, dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(AddTestComponent);
