import React from 'react';

import Button from 'components/Button';
import * as val from 'utils/fieldValidation';
import TextField from 'components/TextField';
import Title from 'components/Title';
import CenterCard from 'components/CenterCard';
import ServerError from 'components/ServerError';
import { restrictedPasswords } from 'utils/constants';

const fieldValidations = [
  val.ruleRunner('username', 'User Name', val.required, val.cantContain([' '])),
  val.ruleRunner('email', 'Email', val.mustContain('@')),
  val.ruleRunner('password1', 'Password', val.required, val.minLength(6),
                val.cantContain(restrictedPasswords, ['email', 'username'])),
  val.ruleRunner('password2', 'Password Confirmation', val.mustMatch('password1', 'Password')),
];


class SignupCard extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    signup: React.PropTypes.func.isRequired,
    error: React.PropTypes.string,
  }

  static defaultProps = {
    error: '',
  }

  state = {
    username: '',
    email: '',
    password1: '',
    password2: '',
    showErrors: false,
    validationErrors: {
      email: '',
      password1: '',
      password2: '',
    },
  }

  errorFor(field) {
    if (this.state.validationErrors[field]) {
      return this.state.validationErrors[field];
    }
    return '';
  }

  handelInputChange(field) {
    return (e) => {
      const newState = {
        ...this.state,
        [field]: e.target.value,
      };
      newState.validationErrors = val.run(newState, fieldValidations);
      this.setState(newState);
    };
  }

  handelSubmit = (e) => {
    e.preventDefault();
    this.handleSubmitClicked();
  }

  handleSubmitClicked = () => {
    this.setState({
      ...this.state,
      showErrors: true,
    });
    // Check if validationErrors is empty
    if (Object.getOwnPropertyNames(this.state.validationErrors).length === 0) {
      // send to server
      this.props.signup(this.state.email, this.state.password1);
    }
  }

  render() {
    return (
      <CenterCard zLevel={1}>
        <Title className="SignupCard-title">Signup</Title>
        <form className={'text-left'} onSubmit={this.handelSubmit}>
          <TextField
            name="username"
            label="User Name *"
            placeHolder="User Name"
            showError={this.state.showErrors}
            text={this.state.username}
            isPassword={false}
            onFieldChange={this.handelInputChange('username')}
            errorText={this.errorFor('username')}
          />
          <TextField
            name="email"
            label="Email Address"
            placeHolder="Email address"
            showError={this.state.showErrors}
            text={this.state.email}
            isPassword={false}
            onFieldChange={this.handelInputChange('email')}
            errorText={this.errorFor('email')}
          />
          <TextField
            name="password1"
            label="Password *"
            placeHolder="Password"
            showError={this.state.showErrors}
            text={this.state.password1}
            isPassword
            onFieldChange={this.handelInputChange('password1')}
            errorText={this.errorFor('password1')}
          />
          <TextField
            name="password2"
            placeHolder="Confirm password"
            showError={this.state.showErrors}
            text={this.state.password2}
            isPassword
            onFieldChange={this.handelInputChange('password2')}
            errorText={this.errorFor('password2')}
          />
          <p>* required fields</p>
        </form>
        {this.props.error ? <ServerError>{this.props.error}</ServerError> : ''}
        <Button onClick={this.handleSubmitClicked}>Submit</Button>
      </CenterCard>
    );
  }
}

export default SignupCard;

@@ -965,14 +965,84 @@
 pes.
-string
+oneOfType(%5B%0A      React.PropTypes.string,%0A      React.PropTypes.bool,%0A    %5D)
 ,%0A  
@@ -1220,16 +1220,36 @@
 rors: %7B%0A
+      username: '',%0A
       em
@@ -1759,77 +1759,8 @@
 ();%0A
-    this.handleSubmitClicked();%0A  %7D%0A%0A  handleSubmitClicked = () =%3E %7B%0A
     
@@ -1984,26 +1984,115 @@
     
-this.props.signup(
+console.log('signupCard, calling signup');%0A      this.props.signup(%7B username: this.state.username, email: 
 this
@@ -2104,16 +2104,26 @@
 e.email,
+ password:
  this.st
@@ -2135,16 +2135,18 @@
 assword1
+ %7D
 );%0A    %7D
@@ -3776,16 +3776,44 @@
     
-%3C/form%3E%0A
+  %3Cdiv className=%22text-center%22%3E%0A    
     
@@ -3900,16 +3900,20 @@
     
+    
 %3CButton 
 onCl
@@ -3912,57 +3912,69 @@
 ton 
-onClick=%7Bthis.handleSubmitClicked%7D%3ESubmit%3C/Button
+type=%22submit%22%3ESubmit%3C/Button%3E%0A          %3C/div%3E%0A        %3C/form
 %3E%0A  

Add username to validationErros and change form to submit based