import type { ReactNode } from 'react';
import { useGlobal } from 'hooks/useGlobal';

/**
 * What the editor panel is showing, announced by whichever panel owns it.
 *
 * ── Why the ELEMENT and not a descriptor ──
 *
 * The obvious shape is `{ kind: 'spacing', componentId: 12 }` and a switch in the panel. That means
 * every editor's loading, saving and cancelling moves out of the panel that knows about sections and
 * into one that would have to learn — a second place that understands what a component is, kept in
 * step by hand.
 *
 * So the owner builds the editor and this carries it. The panel is a frame: it decides where the
 * editor lives on screen and nothing about what it does. `SaveTarget` makes the same trade for the
 * same reason — the section announces its own Save rather than DetailPanel learning to perform one.
 *
 * ── The hazard, which is real ──
 *
 * An element captures the props it was built with. Announce it once and the panel will happily show
 * the values from that render forever. Whoever announces must do so in an effect that depends on
 * everything the editor displays — the same rule `useSaveTarget` documents, and the same way to get it
 * wrong.
 *
 * ── `useGlobal`, not a context ──
 *
 * The two panels are siblings; neither may own the other, and wrapping both in a provider would mean a
 * component above them knowing they exist. A keyed slot is the house pattern for exactly this.
 */
const KEY = ['fofos-admin', 'editor'];

export const useEditorSlot = () => useGlobal<ReactNode>(KEY, null);