import Form from "react-html-form";
import React from "react";

class MyPage extends React.Component {
  handleSubmit(event, formState, formReference) {
    // formState = {
    //   values: {
    //     usersName: 'demo',
    //     usersEmail: '[email protected]',
    //   },
    //   errors: {},
    //   dirty: {
    //     usersName: true,
    //     usersEmail: true,
    //   },
    //   touched: {
    //     usersName: true,
    //     usersEmail: true,
    //   },
    //   blurred: {
    //     usersName: true,
    //     usersEmail: true,
    //   },
    //   isDirty: true,
    //   isValid: true,
    //   isValidating: false,
    //   submitCount: 1
    // }
    yourHttpClient.post("http://api.example.com/", formState.values);
  }

  render() {
    return (
      <React.Fragment>
        <Form
          // include `WithData` to any form event handler to get the
          // form state included for free as the second argument.
          // The third argument is a reference to the form itself
          // You can still use the standard `onSubmit` if you please
          onSubmitWithData={this.handleSubmit}
        >
          <label>Name:</label>
          <input
            required
            data-errormessage="Name can only include letters"
            pattern="A-Za-z+"
            name="usersName"
            type="text"
          />
          <br />
          <label>Email</label>
          <input required name="email" type="email" />
          <br />
          <button type="submit">Submit</button>
        </Form>
      </React.Fragment>
    );
  }
}