// Rôle : monte le hook d'édition réel sous StrictMode pour observer ses commits DOM.
import { createElement, StrictMode, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { useInlineEdit } from "../../website/src/hooks/useInlineEdit.js";

export function mountInlineEditProbe(element, contentEditable) {
  const commits = [];
  const renders = [];
  const root = createRoot(element);

  function Probe({ value }) {
    const edit = useInlineEdit({
      value,
      onCommit: (next) => commits.push(next),
      blurOnEscape: true
    });
    useLayoutEffect(() => {
      renders.push({ value, draft: edit.draft });
    });
    return createElement("section", null,
      contentEditable
        ? createElement("div", edit.getContentEditableProps({ role: "textbox", "aria-label": "Edit" }))
        : createElement("input", edit.getInputProps({ type: "text", "aria-label": "Edit" })),
      createElement("button", { type: "button" }, "Outside")
    );
  }

  function update(value) {
    flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe, { value }))));
  }
  update("Initial");
  return { update, commits, renders, unmount: () => root.unmount() };
}