// Rôle : expose la politique réelle de réorganisation dans une géométrie stable sous StrictMode.
import { createElement as h, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { useGroupedReorder } from "../../website/src/hooks/useGroupedReorder.js";

const items = [
  { id: "a", group: "A", parent: "p" }, { id: "b", group: "A", parent: "p" },
  { id: "c", group: "B", parent: "p" }, { id: "d", group: "B", parent: "q" }
];

export function mountGroupedReorderProbe(element) {
  const root = createRoot(element);
  const events = [];
  let options = {
    orientation: "vertical", hierarchy: { enabled: true, stickyParents: true },
    reorderFeatures: { item: { groupChange: true }, group: { reorder: true } }, veto: false
  };
  function Probe({ config }) {
    const reorder = useGroupedReorder({
      ...config, namespace: "probe", items,
      getItemGroup: (item) => item.group, getParentId: (item) => item.parent,
      canMoveItem: () => !config.veto, canMoveGroup: () => !config.veto,
      onItemMove: (operation) => events.push(operation), onGroupMove: (operation) => events.push(operation)
    });
    const tile = (id, props, child) => h("div", {
      ...props, key: id, "data-testid": id,
      style: { height: 96, width: 220, border: "1px solid" }
    }, child);
    return h("section", null,
      h("output", { "aria-label": "Dragging", style: { display: "block", height: 24 } },
        reorder.itemReorder.draggingId || reorder.groupReorder.draggingId ? "active" : ""),
      h("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 222px)", gap: 12 } },
        ...items.map((item) => tile(item.id, reorder.getItemProps({ itemId: item.id, groupId: item.group, parentId: item.parent }),
          h("button", { type: "button", onPointerDown: (event) => reorder.itemReorder.startDrag(event, item.id) }, `Item ${item.id}`))),
        ...["A", "B"].map((groupId) => tile(`group-${groupId}`, reorder.getGroupProps({ groupId, parentId: "p" }),
          h("button", { type: "button", onPointerDown: (event) => reorder.groupReorder.startDrag(event, { groupId, parentId: "p" }) }, `Group ${groupId}`))),
        tile("boundary", reorder.getGroupBoundaryProps({ groupId: "B", parentId: "p", placement: "after" }), "Boundary"),
        tile("ungrouped", reorder.getUngroupedDropProps({ parentId: "p" }), "Ungrouped"),
        tile("alien", { ...reorder.getItemProps({ itemId: "alien", groupId: "A", parentId: "p" }), "data-reorder-namespace": "other" }, "Other namespace")
      ));
  }
  function update(patch = {}) {
    options = { ...options, ...patch };
    flushSync(() => root.render(h(StrictMode, null, h(Probe, { config: options }))));
  }
  update();
  return { events, update, unmount: () => root.unmount() };
}