import React from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Form, Field, FormSpy } from "react-final-form";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const asyncValidator = () => new Promise(res => setTimeout(() => res(), 1000));

const requiredValidator = value => (value ? "" : "required");

class App extends React.Component {
  state = { mounted: false };
  componentDidMount() {
    this.setState({ mounted: true, step: 0 });
  }
  render() {
    return (
      <Styles>
        <Form
          onSubmit={
            this.state.mounted
              ? async values => {
                  await sleep(300);
                  window.alert(JSON.stringify(values, 0, 2));
                }
              : () =>
                  window.alert(
                    "You are incorrectly calling an outdated onSubmit"
                  )
          }
          render={({ handleSubmit, reset, submitting, pristine, values }) => (
            <form onSubmit={handleSubmit}>
              <div>
                {this.state.step === 0 && (
                  <React.Fragment>
                    <label>First Name</label>
                    <Field
                      name="firstName"
                      component="input"
                      type="text"
                      placeholder="First Name"
                      validate={asyncValidator}
                    />
                  </React.Fragment>
                )}
                {this.state.step === 1 && (
                  <React.Fragment>
                    <label>Password Requiered</label>
                    <Field
                      name="password"
                      component="input"
                      type="text"
                      placeholder="12345"
                      validate={requiredValidator}
                    />
                  </React.Fragment>
                )}
              </div>
              <FormSpy>
                {({ validating, submitting, pristine, valid }) => (
                  <div className="buttons">
                    {this.state.step === 0 && (
                      <button
                        type="button"
                        onClick={() => this.setState({ step: 1 })}
                        disabled={validating || !valid || pristine}
                      >
                        Next
                      </button>
                    )}
                    {this.state.step === 1 && (
                      <button
                        type="submit"
                        disabled={validating || submitting || pristine}
                      >
                        Submit
                      </button>
                    )}
                    <button
                      type="button"
                      onClick={reset}
                      disabled={submitting || pristine}
                    >
                      Reset
                    </button>
                    <pre>
                      {JSON.stringify({ values, validating, valid }, 0, 2)}
                    </pre>
                  </div>
                )}
              </FormSpy>
            </form>
          )}
        />
      </Styles>
    );
  }
}
render(<App />, document.getElementById("root"));