// Example F — an SW NORMAL-mode SWHeader with file open and a tool bar: logo → Open → file → layer → color → K, plus
// a tool bar (Model / Layout, 2.5D, Fit) after the menus. Everything is SWHeader props, so the existing responsive
// More serves the whole layout (Open moves into More when the measured header has no room). No freeze / lock, no
// "+ New" in this product.
// It is NOT the SW viewer mode: a viewer screen (DWG/DXF viewing) uses SWViewerHeader / SWViewerMenu /
// SWViewerPanel (Example H, VIEWER.md). "Viewer" in the file and function name is a former name, kept so existing
// imports keep working.
import { useState } from "react"
import { SWHeader, SWToolButton, SWToolGroup } from "@hm-design/sw"
import { colors, documents, layers } from "./sample-data"

// The program supplies its icons (24 x 23 box of a pill button). Colors: the existing print icon fill #B6D0C9,
// hover --hm-sw-header-selected-color (#FFC600), as in DESIGN_RULES §2.
const FitIcon = ({ color }: { color: string }) => (
  <svg viewBox="0 0 24 23" width="24" height="23" aria-hidden="true">
    <path d="M2 8V2h6M16 2h6v6M22 15v6h-6M8 21H2v-6" fill="none" stroke={color} strokeWidth="2" />
  </svg>
)

export function ExampleFViewerToolbar({ onEvent }: { onEvent?: (name: string) => void }) {
  const [activeLayerId, setActiveLayerId] = useState("0")
  const [view, setView] = useState<"model" | "layout">("model")
  const [depth, setDepth] = useState(false)
  return (
    <SWHeader
      documentTitle={documents[0].name}
      documents={documents}
      activeDocumentId="doc-1"
      documentOpenPlacement="header"
      documentOpenLabel="파일 열기"
      onDocumentOpen={() => onEvent?.("document:open")}
      onDocumentSelect={document => onEvent?.(`document:${document.id}`)}
      controls={[{ id: "document" }, { id: "layer" }, { id: "color" }, { id: "popupGuide" }]}
      hiddenControls={["documentNew", "layerFreeze", "layerLock"]}
      layers={layers}
      activeLayerId={activeLayerId}
      onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
      colors={colors}
      onColorSelect={option => onEvent?.(`color:${option.id}`)}
      tools={<>
        <SWToolGroup label="보기" selection="single">
          <SWToolButton pressed={view === "model"} onClick={() => { setView("model"); onEvent?.("view:model") }}>Model</SWToolButton>
          <SWToolButton pressed={view === "layout"} onClick={() => { setView("layout"); onEvent?.("view:layout") }}>Layout</SWToolButton>
        </SWToolGroup>
        <SWToolGroup label="표시">
          <SWToolButton pressed={depth} onClick={() => { setDepth(!depth); onEvent?.(`2.5d:${!depth}`) }}>2.5D</SWToolButton>
        </SWToolGroup>
        <SWToolGroup appearance="pill" aria-label="화면">
          <SWToolButton appearance="pill" icon={<FitIcon color="#B6D0C9" />} hoverIcon={<FitIcon color="var(--hm-sw-header-selected-color)" />} onClick={() => onEvent?.("fit")}>화면 맞춤</SWToolButton>
        </SWToolGroup>
      </>}
    />
  )
}