import React, { Component } from 'react';
import '../css/Intent.css'

class IntentDetails extends Component {
  constructor(props){
    super(props);

    this.state= {intent: props.selectedIntent};

    this.addQuestion = this.addQuestion.bind(this);
    this.deleteQuestion = this.deleteQuestion.bind(this);
  }

  componentWillReceiveProps(props){
    this.setState({intent: props.selectedIntent});
  }

  render() {
    return (
      <div className="IntentDetails">
        <p> Questions </p>
        {
          this.state.intent.questions.map((question, index)=>{
            return (
              <div key={index} className="QuestionBox">
                <input value={question}></input>
                <button onClick={()=>{this.deleteQuestion(question)}}>Del</button>
              </div>
            );
          })
        }
        <p> Answer </p>
        {
          <input value={this.state.intent.answer}></input>
        }
        <br></br>
        <br></br>
        <button onClick={this.addQuestion}>Add question</button>
        <button onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete</button>
        <button onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</button>
      </div>
    );
  }

  addQuestion(){
    let newIntent = this.state.intent;
    newIntent.questions.push('New question');
    this.setState({intent: newIntent});
  }

  deleteQuestion(question){
    let newIntent = this.state.intent;
    let removeId = newIntent.questions.indexOf(question);
    if (removeId !== -1)
      newIntent.questions.splice(removeId,1);
    
    this.setState({intent: newIntent});
  }
}

export default IntentDetails;