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

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-box1">
            <div>
                <i className="fa fa-envelope-o fa-3x"></i>
            </div>
            <div>
              <Row>
                <Col md={12}>
                    <FormGroup>
                       <ControlLabel className='subheading'>Email</ControlLabel>
                      <FormControl
                        type="text"
                        value     = {this.state.email}
                        onChange  = {(evt) => this.onUpdate('email', evt.currentTarget.value)}
                        placeholder="Organisation Name"
                      />
                      </FormGroup>
                </Col>
              </Row>
            </div>
        <div className = "wizardPane-sectionD wizardPane-footer">
          <Button type="submit" onClick   = {() => this.onSetEmail()} className='blue'>Verify Now</Button>
          {/* <Button type="submit" onClick   = {() => this.onSetEmail()} className='blue'>Sign Up</Button> */}
        </div>
      </div>
    );
  };

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

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

          <div className = "wizardPane-title">
          {/* <i className="icon-envelope icon"></i> */}
           <h3>Hi, your email needs verification</h3>

            <span>Please check your email – we sent a verification link to &nbsp;
            <span className = "EmailVerify">
            {user.emails[0].address}</span></span>
          </div>
        </div>
        <div className = "wizardPane-sectionD 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();
  };

};