// Rôle : expose les hooks réels de formulaire et déplacement sous StrictMode pour les tests navigateur.
import { createElement as h, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { useDraftForm } from "../../website/src/hooks/useDraftForm.js";
import { usePointerReorder } from "../../website/src/hooks/usePointerReorder.js";

export function mountFormReorderProbe(element, kind) {
  const events = [];
  const root = createRoot(element);
  function Form() {
    const form = useDraftForm({ title: "Initial", detail: "Kept" });
    return h("form", { onSubmit: (event) => {
      form.handleSubmit(event, (values, { reset }) => {
        events.push({ ...values });
        if (!values.title.trim()) return "Required";
        reset();
      });
      events.push({ prevented: event.defaultPrevented });
    } },
    h("input", form.getFieldProps("title", { "aria-label": "Title", onChange: () => events.push("changed") })),
    h("input", form.getFieldProps("detail", { "aria-label": "Detail" })),
    h("p", { role: "alert" }, form.error),
    h("button", { type: "submit" }, "Submit"),
    h("button", { type: "button", onClick: () => form.updateValues({ title: "Patched" }) }, "Patch"),
    h("button", { type: "button", onClick: () => form.reset({ title: "Replacement", detail: "New" }) }, "Replace"));
  }
  function Reorder({ revision }) {
    const reorder = usePointerReorder({
      targetSelector: "[data-probe-item]",
      getTargetId: (element) => element.dataset.probeItem,
      canDropOn: (element) => element.dataset.probeItem !== "blocked",
      onMove: (source, target, placement) => events.push({ source, target, placement, revision })
    });
    return h("section", null,
      h("output", { "aria-label": "Dragging", style: { display: "block", height: 24 } }, reorder.draggingId),
      ...["a", "b", "blocked"].map((id) => h("div", {
        key: id, "data-probe-item": id,
        style: { height: 100, width: 300, border: "1px solid", margin: 10 }
      }, h("button", { type: "button", onPointerDown: (event) => reorder.startDrag(event, id) }, id))));
  }
  const Component = kind === "form" ? Form : Reorder;
  function update(revision = 0) {
    flushSync(() => root.render(h(StrictMode, null, h(Component, { revision }))));
  }
  update();
  return { events, update, unmount: () => root.unmount() };
}