// Test-only host for header-composition.browser.mjs (2026-10-20). Not a Storybook Story and not shipped (package
// "files" is dist + ai). It replaces the Composition demo removed in 5faa1f1 for the hiddenControls / menuOrder checks.
// Uses only the public @hm-design/sw API, like a consuming project. window.__setComposition({ hidden, order }) changes
// the props at runtime; the layer selection is host state, so it must survive reordering, hiding and showing again.
import { useEffect, useState } from "react"
import { createRoot } from "react-dom/client"
import { SWHeader, type SWHeaderHideableControlId, type SWHeaderLayer, type SWHeaderMenuId } from "@hm-design/sw"
import "@hm-design/sw/styles.css"

type Composition = { hidden?: SWHeaderHideableControlId[]; order?: SWHeaderMenuId[] }
declare global { interface Window { __setComposition?: (next: Composition) => void; __callbacks: string[] } }
window.__callbacks = []

const LAYERS: SWHeaderLayer[] = [
  { id: "0", name: "0", color: "#ffffff" },
  { id: "wall", name: "WALL", color: "#ff4242" },
  { id: "dim", name: "DIM", color: "#47af91" },
]
const record = (line: string) => { window.__callbacks.push(line) }

function Host() {
  const [composition, setComposition] = useState<Composition>({})
  const [layerId, setLayerId] = useState("0")
  useEffect(() => { window.__setComposition = next => setComposition(next) }, [])
  const layer = LAYERS.find(item => item.id === layerId)!
  return (
    <div data-composition-fixture="" data-hidden={(composition.hidden ?? []).join(",")} data-order={composition.order?.join(",") ?? "default"}>
      <SWHeader
        documentTitle="C0020101-006-평면및종단면도(06)" drawingModeLabel="그리기모드"
        documents={[{ id: "doc-current", name: "C0020101-006-평면및종단면도(06)" }]} activeDocumentId="doc-current"
        layers={LAYERS} activeLayerId={layerId} layer={{ name: layer.name }}
        color={{ value: "255,229,0", swatch: "#ffe500" }}
        lineStyle={{ name: "Continuous", weight: "0.25", scale: "1.00" }}
        textStyle={{ font: "Arial", name: "Standard" }} dimensionStyle={{ name: "Standard" }}
        hiddenControls={composition.hidden} menuOrder={composition.order}
        onHomeClick={() => record("onHomeClick")} onLayerSelect={item => { setLayerId(item.id); record(`onLayerSelect(${item.id})`) }}
        onLayerOpen={() => record("onLayerOpen")} onColorOpen={() => record("onColorOpen")} onLineStyleOpen={() => record("onLineStyleOpen")}
        onTextStyleOpen={() => record("onTextStyleOpen")} onDimensionStyleOpen={() => record("onDimensionStyleOpen")}
        onPrint={() => record("onPrint")} onPopupGuide={() => record("onPopupGuide")} onMinimize={() => record("onMinimize")} onClose={() => record("onClose")}
      />
    </div>
  )
}

createRoot(document.getElementById("root")!).render(<Host />)