import * as React from 'react';
import * as reduxForm from 'redux-form';

export interface Props extends reduxForm.InjectedFormProps {}

let passedUsername = false;
let passedPassword = false;

const required = (value: string, callback: (passed: boolean) => void) => {
  console.info(`PERFORM REQUIRED FIELD CHECK FOR ${value}`);
  if  (value && value.trim().length > 0) {
      callback(true);
  } else {
    callback(false);
  }
};

const usernameRequired = (value: string) => {
  required(value, passed => { passedUsername = passed; });
};
const passwordRequired = (value: string) => {
  required(value, passed => { passedPassword = passed; });
};

const isPassed = () => {
  console.info(`USER PASSED: ${passedUsername}`);
  console.info(`PASSWORD PASSED: ${passedPassword}`);
  const result = passedUsername && passedPassword;
  console.info(`PASSED: ${result}`);
  return result;
};

const LoginForm = ({handleSubmit, pristine, submitting}: Props) => (
    <form onSubmit={handleSubmit}>
    <div>
      <label>Username </label>
      <reduxForm.Field
            name="username"
            component="input"
            type="text"
            validate={[usernameRequired]}
            placeholder="Username"
      />
      <br/>
      <label>Password </label>
       <reduxForm.Field
            name="password"
            component="input"
            type="password"
            validate={[passwordRequired]}
            placeholder="Password"
       />
    </div>
    <br/>
    <div>
        <button type="submit" disabled={!isPassed()}>
        <i className="fa fa-spinner fa-spin" style={{visibility: (submitting) ? 'visible' : 'hidden'}}/>
        &nbsp;
        <strong>Login</strong>
        </button>
      </div>
    </form>
);

export default reduxForm.reduxForm({
  form: 'login'
})(LoginForm);