import React, {Component} from 'react';
import {TextField} from 'react-md';
import '../../css/components/IntentDetails.css';
import '../../css/Common.css';
import {
  ANSWER_MAX_LENGTH,
  ANSWER_TYPE,
} from '../../config/constants';

class AnswerTextBox extends Component {

  render () {
      //theese are defaults for ANSWER_TYPE.PREDEFINED
      let labelText="Answer";
      let valueText=this.props.answer;
      let onChangeValue=this.props.handleAnswerEdit;
      switch(this.props.answerType){
          case ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES:
          case ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS:
            labelText="Answer source";
            valueText=this.props.externalAnswerSource;
            onChangeValue=this.props.handleAnswerSourceEdit
            break;
      }
      

    return(
    <div className="QuestionBox">
        <TextField
          id="intent answer"
          lineDirection="center"
          label={labelText}
          placeholder={labelText}
          maxLength={ANSWER_MAX_LENGTH}
          className="md-cell md-cell--bottom IntentDetailsInputBoxes"
          onChange={onChangeValue}
          value={valueText}
        />
      </div>
    );
  }
}

export default AnswerTextBox;