// Example B — composition (2nd priority): a simplified viewer header
//   Logo → File → Layer → Color → K
// Only public components; the layout is the consumer's (example-layout.css) and <SWTheme> provides tokens.
import { useState } from "react"
import {
  SWHeaderActions, SWHeaderColorMenu, SWHeaderDocumentTitle, SWHeaderHome, SWHeaderLayerMenu, SWTheme,
  type SWHeaderColorMode, type SWHeaderColorValue,
} from "@hm-design/sw"
import { colors, documents, layers } from "./sample-data"
import "./example-layout.css"

export function ExampleBViewerHeader({ onEvent }: { onEvent?: (name: string) => void }) {
  const [activeDocumentId, setActiveDocumentId] = useState(documents[0].id)
  const [activeLayerId, setActiveLayerId] = useState("0")
  const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
  const [colorMode, setColorMode] = useState<SWHeaderColorMode | null>("byLayer")
  return (
    <SWTheme className="app-sw-bar" role="banner" aria-label="뷰어 헤더">
      <SWHeaderHome logoAlt="뷰어" onClick={() => onEvent?.("home")} />
      <SWHeaderDocumentTitle
        title={documents.find(item => item.id === activeDocumentId)?.name ?? ""}
        documents={documents}
        activeDocumentId={activeDocumentId}
        onDocumentSelect={document => { setActiveDocumentId(document.id); onEvent?.(`document:${document.id}`) }}
        onNew={() => onEvent?.("document:new")}
        onOpen={() => onEvent?.("document:open")}
      />
      <div className="app-sw-surface" role="toolbar" aria-label="보기 설정">
        <SWHeaderLayerMenu
          value={{ name: "0" }}
          layers={layers}
          activeLayerId={activeLayerId}
          onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
          onVisibilityChange={(layer, next) => onEvent?.(`layer-visible:${layer.id}:${next}`)}
        />
        <SWHeaderColorMenu
          value={color}
          colors={colors}
          mode={colorMode}
          onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); setColorMode(null); onEvent?.(`color:${option.id}`) }}
          onModeChange={mode => { setColorMode(mode); onEvent?.(`colorMode:${mode}`) }}
        />
      </div>
      <div className="app-sw-window">
        {/* K only: the existing actions pill with print removed. */}
        <SWHeaderActions showPrint={false} onPopupGuide={() => onEvent?.("popupGuide")} />
      </div>
    </SWTheme>
  )
}