// Exercise 3: batching — predict how many renders happen
//
// `handleSubmit` below calls setCount, setSubmitted, and setError all in one
// event handler. Implement `countStateUpdatesInHandler` (pure, no React) so
// it returns how many DISTINCT setState calls appear in a handler like this
// one — then implement `renderCountAfterBatchedClick`, a pure function that
// tells you how many re-renders React 18's automatic batching produces for
// ANY number of setState calls fired synchronously within one event handler
// (the answer is always the same number, regardless of how many calls).
//
// TODO 1: implement countStateUpdatesInHandler(handlerBody: string[])
// TODO 2: implement renderCountAfterBatchedClick(numberOfSetStateCalls)
// TODO 3: wire up FormWithBatching so all three setState calls actually run
//         inside one handler (they already do — just remove the TODO stub)

import { useState } from "react";

// TODO 1: pure helper — count how many strings in the array start with "set"
// (case-sensitive), simulating "how many setState calls are in this handler".
function countStateUpdatesInHandler(handlerBody: string[]): number {
  return 0; // TODO: handlerBody.filter(line => line.startsWith("set")).length
}

// TODO 2: pure helper — with React 18 automatic batching, ANY number of
// synchronous setState calls inside one event handler produces exactly how
// many re-renders? Return that constant number regardless of the input.
function renderCountAfterBatchedClick(numberOfSetStateCalls: number): number {
  return numberOfSetStateCalls; // TODO: this is wrong — batching means it's NOT 1-per-call
}

function FormWithBatching() {
  const [count, setCount] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function handleSubmit() {
    // TODO 3: these three calls should all be here, firing synchronously —
    // they belong to ONE batched update in React 18, producing ONE render.
    setCount((c) => c + 1);
    setSubmitted(true);
    setError(null);
  }

  return (
    <div>
      <button onClick={handleSubmit}>Submit</button>
      <p>count: {count}, submitted: {String(submitted)}, error: {String(error)}</p>
    </div>
  );
}

export { FormWithBatching, countStateUpdatesInHandler, renderCountAfterBatchedClick };

// --- self-check: do not modify below this line ---
const handlerLines = ["const x = 1;", "setCount((c) => c + 1);", "setSubmitted(true);", "setError(null);"];
const countCheck = countStateUpdatesInHandler(handlerLines) === 3;
const batchCheck =
  renderCountAfterBatchedClick(1) === 1 &&
  renderCountAfterBatchedClick(3) === 1 &&
  renderCountAfterBatchedClick(50) === 1;
console.log(countCheck ? "PASS (counted 3 setState calls)" : "FAIL (counted 3 setState calls)");
console.log(batchCheck ? "PASS (batching always yields 1 render)" : "FAIL (batching always yields 1 render)");

// Verify visually: mount <FormWithBatching />, add a console.log at the top
// of the component body (it runs once per render), click Submit once — the
// log should print ONCE, not three times, confirming the three setState
// calls were batched into a single re-render.