import React                              from 'react';
import { Link }                           from 'react-router';
import { If, Case }                       from '/imports/client/components/Logic';
import { Bert }                             from 'meteor/themeteorchef:bert';

import { Row, Col, Alert,ControlLabel,
        FormGroup, FormControl, Button }  from 'react-bootstrap';


export class EmailPane extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      email:  props.user.emails[0].address,
      form:   false,
    };
  };

  onUpdate(key, val) {
    this.setState({[key]: val});
  };

  onSetEmail() {
    startEmailVerification.call({email: this.state.email}, (err, res)=>{
      Bert.alert('New verification email sent!', 'success');

    });
    this.setState({form: false});
  };

  onShowForm() {
    this.setState({form: true});
  };

  renderForm() {
    const {user} = this.props;

    return (
      <div className = "wizardPane-box">
        <div className = "wizardPane-section">
            <div className="icon-circle icon-lg">
                <i className="icon icon-simple icon-envelope"></i>
            </div>
          <div className = "wizardPane-title">
            Set your email address
          </div>
          <div className = "col-xs-8 horizontalform verifyEmail wizardPane-text">
            <div className="form-row">
                <Col sm={4}>
                    Enter email
                </Col>
                <Col sm={8}>
                   <input
                    type      = "text"
                    value     = {this.state.email}
                    onChange  = {(evt) => this.onUpdate('email', evt.currentTarget.value)}
                    placeholder = "Email"
                  />
                </Col>
            </div>

          </div>
        </div>
        <div className = "wizardPane-section wizardPane-footer">
          <div
            className = "wizardPane-button btn btn-blue"
            onClick   = {() => this.onSetEmail()}
          >
            Send verification email
          </div>
        </div>
      </div>
    );
  };

  renderMessage() {
    const {user} = this.props;

    return (
      <div className = "wizardPane-box">
        <div className = "wizardPane-section">

          <div className = "wizardPane-title">
          <i className="icon-envelope icon"></i>
           <h3>Verify your email</h3>
          </div>
          <div className = "wizardPane-text">
            Check your email – we sent a verification link to<br/>
            {user.emails[0].address}
          </div>
        </div>
        <div className = "wizardPane-section wizardPane-footer">
          <div className="btn"
            className = "wizardPane-link"
            onClick   = {() => this.onShowForm()}
          >
            Email did not arrive or want to use a different email?
          </div>
        </div>
      </div>
    );
  };

  render() {
    return this.state.form ? this.renderForm() : this.renderMessage();
  };

};