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

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

    this.state = {contactEmail: props.contactEmail};

    this.handleEmailEdit = this.handleEmailEdit.bind(this);
  }

  componentWillReceiveProps(props){
    this.setState({contactEmail: props.contactEmail});
  }

  render() {
    return (
      <div className="RightPanelBox">
        <h5 className="PanelSubTitle"> Contact address will be used for direct messaging through Alexa </h5>
        <TextField
          id="contact email"
          lineDirection="center"
          label="Contact email"
          className="md-cell md-cell--bottom ContactEmailInput"
          maxLength={EMAIL_MAX_LENGTH}
          onChange={this.handleEmailEdit}
          value={this.state.contactEmail}/>
        <br></br>
        <br></br>
        <br></br>
        <Button className="SaveButton" flat primary swapTheming 
                onClick={()=>{this.props.onSaveEmailClick(this.state.contactEmail)}}
                disabled={this.props.waiting}>Save</Button>
      </div>
    );
  }

  handleEmailEdit(e){
    if (e.length === EMAIL_MAX_LENGTH) return;
    this.setState({contactEmail: e});
  }
}

export default Contact;