// Rôle : observe les valeurs validées et les setters différés d'un état lié à une clé.
/* global sessionStorage */
import { createElement, StrictMode, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { useKeyedState } from "../../website/src/hooks/useKeyedState.js";

export function mountKeyedStateProbe(element) {
  const root = createRoot(element);
  const snapshots = [];
  const setters = new Map();
  let reads = 0;

  function Probe({ identity }) {
    const [value, setValue] = useKeyedState(identity, (key) => {
      reads++;
      return JSON.parse(sessionStorage.getItem(`keyed-probe:${key}`) || "[]");
    });
    useLayoutEffect(() => {
      snapshots.push({ key: identity, value });
      setters.set(identity, setValue);
    });
    return createElement("output", null, JSON.stringify(value));
  }

  function update(identity) {
    snapshots.length = 0;
    flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe, { identity }))));
  }
  update("a");
  return {
    update,
    snapshots,
    get reads() { return reads; },
    append: (key, value) => flushSync(() => setters.get(key)((current) => [...current, value])),
    unmount: () => root.unmount()
  };
}