import React, { useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const App = () => {
  const [data, setData] = useState({
    name: "Chris",
    email: "chris@email.test",
    presence: false,
    diet: ""
  });

  const setField = (field) => (event) =>
    setData((currentData) => ({ ...currentData, [field]: event.target.value }));

  const action = () => console.log("Saving...", data);

  return (
    <div className="App">
      <form>
        <fieldset>
          <legend>Identity</legend>
          <div>
            <label for="name">Name : </label>
            <input
              type="text"
              id="name"
              value={data.name}
              onChange={setField("name")}
            />
          </div>
          <div>
            <label for="email">Email : </label>
            <input
              id="email"
              type="email"
              value={data.email}
              onChange={setField("email")}
            />
          </div>
        </fieldset>

        <fieldset>
          <legend>Event</legend>
          <div>
            <label for="presence">Presence : </label>
            <input
              type="checkbox"
              id="presence"
              value={data.presence}
              onChange={setField("presence")}
            />
          </div>
          <div>
            <label for="diet">Diet : </label>
            <input
              id="diet"
              value={data.diet}
              onChange={setField("diet")}
              disabled={!data.presence}
            />
          </div>
        </fieldset>

        <button onClick={action} type="button">
          {" "}
          Submit{" "}
        </button>
      </form>
    </div>
  );
};

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