// Example A — reuse (1st priority): the complete SW Header, unchanged. Existing projects keep this code.
import { useState } from "react"
import { SWHeader, type SWHeaderColorMode, type SWHeaderColorValue } from "@hm-design/sw"
import { colors, dimensionStyles, documents, layers, lineTypes, lineWeights, textStyles } from "./sample-data"

export function ExampleADefaultHeader({ 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")
  const log = (name: string) => () => onEvent?.(name)
  return (
    <SWHeader
      documentTitle={documents.find(item => item.id === activeDocumentId)?.name ?? ""}
      logoAlt="예제 SW"
      documents={documents}
      activeDocumentId={activeDocumentId}
      onDocumentSelect={document => { setActiveDocumentId(document.id); onEvent?.(`document:${document.id}`) }}
      onDocumentNew={log("document:new")}
      onDocumentOpen={log("document:open")}
      layers={layers}
      activeLayerId={activeLayerId}
      onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
      color={color}
      colors={colors}
      colorMode={colorMode}
      onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); setColorMode(null); onEvent?.(`color:${option.id}`) }}
      onColorModeChange={mode => { setColorMode(mode); onEvent?.(`colorMode:${mode}`) }}
      lineTypes={lineTypes}
      lineWeights={lineWeights}
      textStyles={textStyles}
      dimensionStyles={dimensionStyles}
      onHomeClick={log("home")}
      onPrint={log("print")}
      onPopupGuide={log("popupGuide")}
      onMinimize={log("minimize")}
      onClose={log("close")}
    />
  )
}