import React, { Component } from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
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">
        <h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
        {
          this.state.intent.questions.map((question, index)=>{
            return (
              <div key={index} className="QuestionBox">
                <TextField
                  id="floating-center-title"
                  lineDirection="center"
                  placeholder="Question"
                  className="md-cell md-cell--bottom"
                  style={{width:'60%'}}
                  rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
                  value={question}/>
              </div>
            );
          })
        }
        <br></br>
        {
          <div className="QuestionBox">
            <TextField
              id="floating-center-title"
              lineDirection="center"
              label="Answer"
              placeholder="Answer"
              style={{width:'60%'}}
              className="md-cell md-cell--bottom"
              value={this.state.intent.answer}/>
          </div>
        }
        <br></br>
        <br></br>
        <Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
        <Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>        
        <Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming 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;