import React from 'react';
import { browserHistory } from 'react-router';
import { reduxForm } from 'redux-form';
import store from '../store.jsx';

// Fields for form
const fields = ['user', 'password'];

// Generate CSS for each field, based on error existence
let fieldStyle = field => {
  if (field.touched && field.error) {
    return "field error"
  } else {
    return "field"
  }
}

// Display Errors
let dispErrors = field => {
  if (field.touched && field.error) {
    return (<div className="ui basic red pointing prompt label transition visible">{field.error}</div>)
  }
}

let loginErrors = () => {
  if (store.getState().general.loginError) {
    return (
      <div className="ui error message">
        <div className="header">Login Error:</div>
        {store.getState().general.loginError}
      </div>
    )
  } else {
    return (<div>Blah.</div>)
  }
}

// Validation (ReduxForm)
const validate = values => {

  const errors = {};

  if (!values.user) {
    errors.user = "Required"
  }

  if (!values.password) {
    errors.password = "Required"
  }

  return errors;

}

let loginSubmit = values => {
  Meteor.loginWithPassword(values.user, values.password, function(error) {
    if (error) {
      store.dispatch({type: "LOGIN_ERROR", text: error.reason})
    }
  })
}

let LoginForm = React.createClass({

  render() {

    const { fields: { user, password }, handleSubmit } = this.props;

    return (
      <div className="row">
        <div className="col-sm-4 col-sm-offset-4">
          <div className="auth-box">
            {loginErrors}
            <div className="ui raised segment">
              <form className="ui form">
                <div className={fieldStyle(user)}>
                  <label>Username / E-Mail</label>
                  <input type="text" {...user} />
                  {dispErrors(user)}
                </div>
                <div className={fieldStyle(password)}>
                  <label>Password</label>
                  <input type="password" {...password} />
                  {dispErrors(password)}
                </div>
                <button className="ui button" type="submit" onClick={handleSubmit}>
                  Login
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );

  }

});

LoginForm = reduxForm({
  form: 'login',
  fields: fields,
  validate,
  onSubmit: loginSubmit
})(LoginForm);

export default LoginForm;