import React from 'react';
import { Router, IndexLink, History } from 'react-router';
import { routeActions } from 'redux-simple-router';
import reactMixin from 'react-mixin';
import { connect } from 'react-redux';
import { userService } from 'services';
import { register } from 'actions/session';
import classnames from 'classnames';

class Register extends React.Component {
  componentDidMount() {
    this.checkSession(this.props.session);
  }
  componentWillReceiveProps(nextProps) {
    this.checkSession(nextProps.session);
  }
  onSubmit(e) {
    e.preventDefault();
    this.register();
  }
  checkSession(session) {
    const { dispatch } = this.props;

    if (session.isLoggedIn) {
      dispatch(routeActions.replace('/onboarding/'));
    }
  }
  register() {
    const { dispatch } = this.props;
    const { name, email, username, password } = this.state;
    dispatch(register(name, email, username, password));
  }
  fieldChange(e, fieldName) {
    this.setState({[fieldName]: e.target.value});
  }
  render() {
    const { session } = this.props;

    return (
      <form className="pro-login" onSubmit={(e) => this.onSubmit(e)}>
        {session.error ? (<div className="pro-login__error">{session.error.message}</div>) : null}
        <div className="pro-login-wrap">
          <div className="pro-login__logo"></div>
          <h3 className="pro-login__toggle"><IndexLink to="/login/">LOG IN</IndexLink><span>SIGN UP</span></h3>
          <div className="pro-login__field pro-login__field--fullname">
            <input type="text" onChange={e => this.fieldChange(e, 'name')} placeholder="Full Name" />
          </div>
          <div className="pro-login__field pro-login__field--email">
            <input type="text" onChange={e => this.fieldChange(e, 'email')} placeholder="Email" />
          </div>
          <div className="pro-login__field pro-login__field--username">
            <input type="text" onChange={e => this.fieldChange(e, 'username')} placeholder="Username" />
          </div>
          <div className="pro-login__field pro-login__field--password">
            <input type="password" onChange={e => this.fieldChange(e, 'password')} placeholder="Password" />
          </div>
          <input type="submit" className={classnames('pro-login__submit', {loading: session.isWaiting})} value="Register" />
        </div>
      </form>
    );
  }
}

Register.propTypes = {
  session: React.PropTypes.object,
  dispatch: React.PropTypes.func.isRequired
};

const selectSession = state => {
  return {
    session: state.session
  };
};

export default connect(selectSession)(Register);