import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Field, reduxForm } from 'redux-form';
import InputField from '../input-field/index.js';

class Signup extends Component {
  handleFormSubmit(formProps) {
    // PROBLEM -> Uncaught TypeError: this.props.signupUser is not a function
    this.props.signupUser(formProps);
  }

  render() {
    const { handleSubmit, submitting } = this.props;

    return (
      <form onSubmit={ handleSubmit(this.handleFormSubmit.bind(this)) } >
        <Field name="username" type="text" component={ InputField } label="Username" />
        <Field name="email" type="email" component={ InputField } label="Email" />
        <Field name="password" type="password" component={ InputField } label="Password" />
        <Field name="password_confirmation" type="password" component={ InputField } label="Confirmation" />
        <div>
          <button type="submit" disabled={ submitting }>Submit</button>
        </div>
      </form>
    );
  }
}

function mapStateToProps({ auth }) {
  return { errorMessage: auth.errors };
}

export default reduxForm({
  form: 'signup',
  warn,
  validate
}, mapStateToProps, actions)(Signup);

export function signupUser(props) {
  return dispatch => {
    axios.post(`${apiRoot}users`, { user: { ...props } })
        .then(response => {
          const { status, errors, access_token, username } = response.data;

          if (status === 'created') {
             // handler
          }
          else {
            dispatch(authError(errors));
          }
        })
        .catch(err => dispatch(authError(err.message)));
  }
}

class Signup extends Component {
  handleFormSubmit(formProps) {
    this.props.signupUser(formProps);
  }

  render() {
    const {
      handleSubmit,
      fields: {
        email,
        password,
        password_confirmation,
        username,
      }
    } = this.props;

    return (
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <fieldset className="form-group">
            <label>Username:</label>
            <input className="form-control" {...username} />
            {username.touched && username.error && <div className="error">{username.error}</div>}
          </fieldset>
          <fieldset className="form-group">
            <label>Email:</label>
            <input className="form-control" {...email} />
            {email.touched && email.error && <div className="error">{email.error}</div>}
          </fieldset>
          <fieldset className="form-group">
            <label>Password:</label>
            <input type="password" className="form-control" {...password} />
            {password.touched && password.error && <div className="error">{password.error}</div>}
          </fieldset>
          <fieldset className="form-group">
            <label>Confirm Password:</label>
            <input type="password" className="form-control" {...password_confirmation} />
            {password_confirmation.touched && password_confirmation.error && <div className="error">{password_confirmation.error}</div>}
          </fieldset>
          <button action="submit">Sign up</button>
        </form>
    );
}