import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

class Signup extends Component {
  // bonus
  // by making method below an arrow function
  // developer does not have to worry
  // about binding the context of onSubmit
  // saves having to call bind(this) somewhere

  // as first argument, all properties user entered into form - an object with email, password
  onSubmit = formProps => {
    // candidate should display logging formProps to ensure they are indeed getting
    // correct data entered in form by user
    console.log(formProps);
  };

  render() {
    // the candidate would understand that the email and Password
    // would have to be taken out of the form itself and provided to
    // onSubmit callback via handleSubmit property provided by reduxForm.
    const { handleSubmit } = this.props;
    return (
      // to handleSubmit() the callback is passed with no parens because
      // we are not calling onSubmit the instance the form is rendered
      // we are only passing a reference to onSubmit, not a call.
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <fieldset>
          <label>Email</label>
          <Field
            name="email"
            type="text"
            component="input"
            autoComplete="none"
          />
        </fieldset>
        <fieldset>
          <label>Password</label>
          <Field
            name="password"
            type="password"
            component="input"
            autoComplete="none"
          />
        </fieldset>
        <button>Sign Up!</button>
      </form>
    );
  }
}

export default reduxForm({ form: "signup" })(Signup);

// candidate will then add email and password, totally arbitrary and the idea is
// to be able to see those credentials logged in console.