import React, { Component } from 'react';
import _ from 'lodash';
import classNames from 'classnames';
import formatErrors from '../lib/format-errors';
import { Link } from 'react-router';
import { subscribe, getState } from '../store.js';
import UserActions from '../actions/UserActions';
import ErrorDisplay from './errorDisplay.jsx';

const propTypes = {
  Errors: React.PropTypes.array
}

class Register extends Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {
    this.unsubscribe = subscribe(this.render);
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  submit(e) {
    e.preventDefault();
    UserActions.register({
      username: this.emailInput.value,
      password: this.passwordInput.value,
      passwordConfirm: this.passwordConfirmInput.value
    });
  }

  render() {
    let formClass = classNames({
      'form-group': true,
      'has-error': false
    });

    let inputClass = classNames({
      'form-control': true,
      'input-lg': true
    });

    return (
        <form className="form-horizontal" onSubmit={this.submit}>
          <h2>Sign Up</h2>
          <hr/>

          <fieldset disabled={''}>
            <div className={formClass}>
              <label className="col-sm-2 control-label">Email</label>
              <div className="col-sm-10">
                <input ref={(ref) => this.emailInput = ref}
                       type="text"
                       className={inputClass}
                       placeholder="Email"
                       onChange={this.emailChange}/>
                <span className="help-block" />
              </div>
            </div>

            <div className={formClass}>
              <label className="col-sm-2 control-label">Password</label>
              <div className="col-sm-10">
                <input ref={(ref) => this.passwordInput = ref}
                       type="password"
                       className={inputClass}
                       placeholder="Password"
                       onChange={this.passwordChange}/>
                <span className="help-block" />
              </div>
            </div>

            <div className={formClass}>
              <label className="col-sm-2 control-label">Confirm Password</label>
              <div className="col-sm-10">
                <input type="password"
                       ref={(ref) => this.passwordConfirmInput = ref}
                       className={inputClass}
                       placeholder="Confirm Password"
                       onChange={this.confirmPassword}/>
                     <span className="help-block" />
              </div>
            </div>

            <div className="form-group">
              <div className="col-sm-offset-2 col-sm-10">
                <input type="submit"
                       className="btn btn-lg btn-primary"
                       value="Sign Up For Betterways!"/>
                <Link to="/login"
                      className="btn btn-lg btn-primary">
                        Login
                </Link>
              </div>
            </div>
          </fieldset>
          {(function () {console.log(getState().Errors.toJS()); return getState().Errors.toJS()}())}
          <ErrorDisplay errorMessages={getState().Errors}/>
        </form>
    );
  }
};

export default Register;