import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import {reduxForm} from 'redux-form';
import { connect } from 'react-redux';
import { updateLoginEmail, updateLoginPassword, login, closeLoginForm } from 'actions//loginForm';
import c from 'classnames';
import Loading from 'react-loading';
import CloseIcon from 'icons//CloseIcon';

class Login extends Component {
  handleSubmit(e) {
    e.preventDefault();
    const {fields: {email, password}} = this.props;
    this.props.login(email.value, password.value);
  }

  handleClose(e) {
    e.preventDefault();
    this.props.closeLoginForm();
  }

  renderLoginOrSubmitting() {
    const submit = this.handleSubmit.bind(this);
    const { handleSubmit } = this.props;

    if(this.props.submitting) {
      return (
        <div className="Login__Submitting">
          <Loading type='bars' color='#e3e3e3' />
        </div>
      );
    }
    else {
      return (
        <a href="/login" className="LoginButton" onClick={this.handleSubmit.bind(this)}> Login </a>
      );
    }
  }

  render() {
    const {fields: {email, password}, error, pristine, submitting, handleSubmit } = this.props;
    const submit = this.handleSubmit.bind(this);

    return (
      <div className="Login">
        <a className="LoginClose" href="#" onClick={this.handleClose.bind(this)}>
          <CloseIcon />
        </a>
        <form onSubmit={handleSubmit(submit)} className='LoginForm'>
           <input type="text"
                 className={c("Login__Email", {"Login__Email--errors error": email.touched && error})}
                 placeholder="email" {...email} />

           <input type="password"
             className={c("Login__Password", {"Login__Password--errors erorr": password.touched && error})}
             placeholder="password"
             ref="password" {...password} />

          {this.renderLoginOrSubmitting()}
          {error && !pristine && <div className="Login__Error">{error}</div>}
        </form>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({login, closeLoginForm }, dispatch);
}

Login = connect(null, mapDispatchToProps)(Login);

Login = reduxForm({
  form: 'login',
  fields: ['email', 'password']
})(Login);

export default Login;

@@ -168,47 +168,8 @@
 rt %7B
- updateLoginEmail, updateLoginPassword,
  log
@@ -623,99 +623,8 @@
 ) %7B%0A
-    const submit = this.handleSubmit.bind(this);%0A    const %7B handleSubmit %7D = this.props;%0A%0A
     
@@ -738,30 +738,30 @@
 ype=
-'
+%22
 bars
-'
+%22
  color=
-'
+%22
 #e3e3e3
-'
+%22
  /%3E%0A
@@ -1007,20 +1007,8 @@
 ine,
- submitting,
  han
@@ -1301,17 +1301,17 @@
 assName=
-'
+%22
 LoginFor
@@ -1311,17 +1311,17 @@
 oginForm
-'
+%22
 %3E%0A      
@@ -1370,25 +1370,25 @@
 lassName=%7Bc(
-%22
+'
 Login__Email
@@ -1387,21 +1387,21 @@
 n__Email
-%22, %7B%22
+', %7B'
 Login__E
@@ -1418,17 +1418,17 @@
 rs error
-%22
+'
 : email.
@@ -1559,17 +1559,17 @@
 Name=%7Bc(
-%22
+'
 Login__P
@@ -1579,13 +1579,13 @@
 word
-%22, %7B%22
+', %7B'
 Logi
@@ -1610,12 +1610,12 @@
 s er
+r
 or
-r%22
+'
 : pa

clean up login form