import React, {Component} from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
import AnswerSource from './AnswerSource.js';
import '../css/components/IntentDetails.css';
import '../css/Common.css';
import {
  QUESTION_MAX_LENGTH,
  ANSWER_MAX_LENGTH,
  INTENT_NAME_MAX_LENGTH,
  INTENT_EXPLANATION_MAX_LENGTH,
  ANSWER_TYPE,
} 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.handleAnswerSourceEdit = this.handleAnswerSourceEdit.bind (this);
    this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
      this
    );
    this.handleExternalSourceSave = this.handleExternalSourceSave.bind (this);
  }

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

  render () {
    let answerBox;
    switch (this.state.intent.answerType) {
      case ANSWER_TYPE.PREDEFINED:
        answerBox = (
          <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>
        );
        break;
      case ANSWER_TYPE.EXTERNAL_SOURCE_WP_JSON:
      case ANSWER_TYPE.EXTERNAL_SOURCE_RSS:
        answerBox = (
          <div className="QuestionBox">
            <TextField
              id="intent answer"
              lineDirection="center"
              label="Answer source"
              placeholder="Answer source"
              maxLength={ANSWER_MAX_LENGTH}
              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
              onChange={this.handleAnswerSourceEdit}
              value={this.state.intent.externalAnswerSource}
            />
          </div>
        );
        break;
    }

    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>
          );
        })}
        <Button
          className="AddQuestionVariantButton"
          icon
          primary
          onClick={this.addQuestion}
          disabled={this.props.waiting}
        >
          add
        </Button>
        <AnswerSource
          className="QuestionTypeButton"
          onSaveHandle={this.handleExternalSourceSave}
          answerType={this.state.intent.answerType}
        />
        {answerBox}
        <Button
          className="IntentDetailsButton-firstInRow"
          flat
          primary
          swapTheming
          onClick={() => {
            this.props.onSaveIntentClick (this.state.intent);
          }}
          disabled={this.props.waiting}
        >
          Save
        </Button>
        <Button
          className="IntentDetailsButton"
          flat
          primary
          onClick={() => {
            this.props.onDeleteIntentClick (this.state.intent);
          }}
          disabled={this.props.waiting}
        >
          Delete
        </Button>

      </div>
    );
  }

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

  deleteQuestion (question) {
    if (this.state.intent.questions.length > 1) {
      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 || !/^[a-z,.' ]*$/i.test (e)) return;
    let newIntent = this.state.intent;
    newIntent.questions[index] = e;
    this.setState ({intent: newIntent});
  }

  handleIntentExplanationEdit (e, index) {
    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
      return;
    let newIntent = this.state.intent;
    newIntent.intentExplanation = e;
    this.setState ({intent: newIntent});
  }

  handleAnswerEdit (e) {
    if (e.length === ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
    let newIntent = this.state.intent;
    newIntent.answer = e;
    this.setState ({intent: newIntent});
  }

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

  handleIntentNameEdit (e) {
    if (e.length === INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
    let newIntent = this.state.intent;
    newIntent.intentName = e;
    this.setState ({intent: newIntent});
  }

  handleExternalSourceSave (answerType) {
    let newIntent = this.state.intent;
    newIntent.answerType = answerType;
    this.setState ({intent: newIntent});
  }
}

export default IntentDetails;