import React, { Component } from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
import '../css/components/IntentDetails.css';
import '../css/Common.css';
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';

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);
    this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
  }

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

  render() {
    return (
      <div className="RightPanelBox">
        <div className="QuestionBox">
        <h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
        <TextField
            id="intent explanation"
            lineDirection="center"
            placeholder="To ask us about our services, say "
            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
            onChange={this.handleIntentExplanationEdit}
            maxLength={INTENT_EXPLANATION_MAX_LENGTH}
            value={this.state.intent.intentExplanation} />
          <br/>
          <TextField
            id="intent name"
            lineDirection="center"
            label="Question name"
            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
            onChange={this.handleIntentNameEdit}
            maxLength={INTENT_NAME_MAX_LENGTH}
            value={this.state.intent.intentName} />
        </div>
        <h5 className="QuestionTitle">Question variants</h5>
        {
          this.state.intent.questions.map((question, index)=>{
            return (
              <div key={index} className="QuestionBox">
                <TextField
                  id="intent question"
                  lineDirection="center"
                  placeholder="Question"
                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
                  maxLength={QUESTION_MAX_LENGTH}
                  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>}
                  onChange={(e)=>{this.handleQuestionEdit(e,index)}}
                  value={question}/>
              </div>
            );
          })
        }
        <br></br>
        {
          <div className="QuestionBox">
            <TextField
              id="intent answer"
              lineDirection="center"
              label="Answer"
              placeholder="Answer"
              maxLength={ANSWER_MAX_LENGTH}
              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
              onChange={this.handleAnswerEdit}
              value={this.state.intent.answer}/>
          </div>
        }
        <br></br>
        <br></br>
        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>        
        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
        
      </div>
    );
  }

  addQuestion(){
    let newIntent = this.state.intent;
    newIntent.questions.push('');
    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});
  }

  handleQuestionEdit(e,index){
    if (e.length === QUESTION_MAX_LENGTH) return;
    let newIntent = this.state.intent;
    newIntent.questions[index] = e;
    this.setState({intent: newIntent});
  }

  handleIntentExplanationEdit(e,index){
    if (e.length === INTENT_EXPLANATION_MAX_LENGTH) return;
    let newIntent = this.state.intent;
    newIntent.intentExplanation = e;
    this.setState({intent: newIntent});
  }

  handleAnswerEdit(e){
    if (e.length === ANSWER_MAX_LENGTH) return;
    let newIntent = this.state.intent;
    newIntent.answer = e;
    this.setState({intent: newIntent});
  }

  handleIntentNameEdit(e){
    if (e.length === INTENT_NAME_MAX_LENGTH) return;
    let newIntent = this.state.intent;
    newIntent.intentName = e;
    this.setState({intent: newIntent});
  }
}

export default IntentDetails;