import React, { Component } from 'react';
import {Button, TextField} from 'react-md';
import '../css/Common.css';
import '../css/components/LaunchRequest.css';
import { INVOCATION_NAME_MAX_LENGTH, INVOCATION_ANSWER_MAX_LENGTH } from '../config/constants';

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

    this.state = {invocationName: props.invocationName, invocationAnswer: props.invocationAnswer};

    this.handleNameEdit = this.handleNameEdit.bind(this);
    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
  }

  componentWillReceiveProps(props){
    this.setState({invocationName: props.invocationName, invocationAnswer: props.invocationAnswer});
  }

  render() {
    return (
      <div className="RightPanelBox">
        <h5 className="PanelSubTitle"> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
        <TextField
          id="invocation name"
          lineDirection="center"
          placeholder="Saburly"
          label="Invocation name"
          className="md-cell md-cell--bottom InvocationInputBoxes"
          maxLength={INVOCATION_NAME_MAX_LENGTH}
          onChange={this.handleNameEdit}
          value={this.state.invocationName}/>
        <br></br>
        <h5 className="PanelSubTitle" >Answer customers get from Alexa when they activate the skill.</h5>
        <TextField
          id="invocation answer"
          lineDirection="center"
          placeholder="We are Saburly, ask us something about us"
          label="Answer"
          className="md-cell md-cell--bottom InvocationInputBoxes"
          maxLength={INVOCATION_ANSWER_MAX_LENGTH}
          onChange={this.handleAnswerEdit}
          value={this.state.invocationAnswer}/>
        <br></br>
        <br></br>
        <Button className="SaveButton" flat primary swapTheming 
                onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}
                disabled={this.props.waiting}>Save</Button>
      </div>
    );
  }

  handleNameEdit(e){
    if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return; 
    this.setState({invocationName: e});
  }

  handleAnswerEdit(e){
    if (e.length === INVOCATION_ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return; 
    this.setState({invocationAnswer: e});
  }
}

export default LaunchRequest;