import React from 'react';
import { reduxForm } from 'redux-form';

// Fields
const fields = ['username', 'email', 'emailAgain', 'password', 'passwordAgain'];

// Validation Function
const validate = values => {

  // Errors object is empty at first.
  const errors = {};

  // Username
  if (!values.username) {
    errors.username = "Required";
  } else if (values.username.length < 3 || values.username.length > 15) {
    errors.username = "Must be between 3 and 15 characters in length"
  }

  // E-mail (and Again)
  if (!values.email) {
    errors.email = "Required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = "Invalid email address"
  }

  if (!values.emailAgain) {
    errors.emailAgain = "Required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.emailAgain)) {
    errors.emailAgain = "Invalid email address"
  }

  if (!(values.email == values.emailAgain)) {
    errors.email = "Email fields must match"
  }

  // Password
  if (!values.password) {
    errors.password = "Required";
  } else if (values.password.length < 8) {
    errors.password = "Must be at least 8 characters in length"
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(values.password)) {
    errors.password = "Must contain one uppercase letter, one lowercase letter, and one number."
  }

  if (!values.passwordAgain) {
    errors.passwordAgain = "Required";
  } else if (values.passwordAgain.length < 8) {
    errors.passwordAgain = "Must be at least 8 characters in length"
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(values.passwordAgain)) {
    errors.passwordAgain = "Must contain one uppercase letter, one lowercase letter, and one number."
  }

  if (values.password != values.passwordAgain) {
    errors.password = "Password fields must match"
  }

  return errors;

}

let RegisterForm = React.createClass({

  render() {

    const { fields: { username, email, emailAgain, password, passwordAgain }, handleSubmit } = this.props;

    return (
      <div className="row">
        <div className="col-sm-6 col-sm-offset-3">
          <div className="auth-box">
            <div className="ui raised segment">
              <form className="ui form" onSubmit={handleSubmit}>
                <div className="field">
                  <label>Username</label>
                  <input type="text" {...username} />
                </div>
                <div className="field">
                  <label>E-mail</label>
                  <input type="text" {...email} />
                </div>
                <div className="field">
                  <label>E-mail (Again)</label>
                  <input type="text" {...emailAgain} />
                </div>
                <div className="field">
                  <label>Password</label>
                  <input type="password" {...password} />
                </div>
                <div className="field">
                  <label>Password (Again)</label>
                  <input type="password" {...passwordAgain} />
                </div>
                <button className="ui button" type="submit">
                  Register Account
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );

  }

});

RegisterForm = reduxForm({
  form: 'register',
  fields: fields,
  validate
})(RegisterForm);

export default RegisterForm;