/* eslint-disable jsx-a11y/accessible-emoji */
import React from "react";
import { render } from "react-dom";
import { Form, useField } from "react-final-form";

const FinalFormCheckbox = ({ name, value, label }) => {
  const renderProps = useField(name, {
    type: "checkbox",
    value
  });

  return (
    <label>
      <input name={name} type="checkbox" value={value} {...renderProps.input} />
      <span>{label}</span>
    </label>
  );
};

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

const onSubmit = async (values) => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const App = () => (
  <>
    <h1>React Final Form - Checkbox Example - v4.20.2 - OK </h1>
    <Form
      onSubmit={onSubmit}
      initialValues={{}}
      render={({ handleSubmit, form, submitting, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <FinalFormCheckbox
              name="choices[]"
              value="choice_1"
              label="Choice 1"
            />
            <FinalFormCheckbox
              name="choices[]"
              value="choice_2"
              label="Choice 2"
            />
            <FinalFormCheckbox
              name="choices[]"
              value="choice_3"
              label="Choice 3"
            />
          </div>

          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
            <button type="button" onClick={form.reset} disabled={submitting}>
              Reset
            </button>
          </div>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  </>
);

render(<App />, document.getElementById("root"));