// Example C — composition (2nd priority): a feature-focused header in a different order
//   File → Line style → Text style → Dimension style → Print
import { useState } from "react"
import {
  SWHeaderActions, SWHeaderDimensionStyleMenu, SWHeaderDocumentTitle, SWHeaderLineStyleMenu, SWHeaderTextStyleMenu, SWTheme,
  type SWHeaderDimensionStyleValue, type SWHeaderLineStyleValue, type SWHeaderTextStyleValue,
} from "@hm-design/sw"
import { dimensionStyles, lineTypes, lineWeights, textStyles } from "./sample-data"
import "./example-layout.css"

export function ExampleCFeatureHeader({ onEvent }: { onEvent?: (name: string) => void }) {
  const [lineStyle, setLineStyle] = useState<SWHeaderLineStyleValue>({ name: "ByLayer", weight: "ByLayer", scale: "1.00" })
  const [textStyle, setTextStyle] = useState<SWHeaderTextStyleValue>({ font: "Arial", name: "Standard" })
  const [dimensionStyle, setDimensionStyle] = useState<SWHeaderDimensionStyleValue>({ name: "Standard" })
  return (
    <SWTheme className="app-sw-bar" role="banner" aria-label="스타일 헤더">
      {/* No logo before the file well, so the consumer layout gives it its own left edge. */}
      <div className="app-sw-file-edge">
        <SWHeaderDocumentTitle title="C0020101-006-평면및종단면도(06)" onClick={() => onEvent?.("document")} />
      </div>
      <div className="app-sw-surface" role="toolbar" aria-label="스타일">
        <SWHeaderLineStyleMenu
          value={lineStyle}
          lineTypes={lineTypes}
          lineWeights={lineWeights}
          onLineTypeSelect={type => { setLineStyle(current => ({ ...current, name: type.name })); onEvent?.(`lineType:${type.id}`) }}
          onLineWeightSelect={weight => { setLineStyle(current => ({ ...current, weight: weight.name })); onEvent?.(`lineWeight:${weight.id}`) }}
          onScaleChange={scale => { setLineStyle(current => ({ ...current, scale })); onEvent?.(`lineScale:${scale}`) }}
        />
        <SWHeaderTextStyleMenu
          value={textStyle}
          textStyles={textStyles}
          onTextStyleSelect={style => { setTextStyle({ font: style.font, name: style.name }); onEvent?.(`textStyle:${style.id}`) }}
        />
        <SWHeaderDimensionStyleMenu
          value={dimensionStyle}
          dimensionStyles={dimensionStyles}
          onDimensionStyleSelect={style => { setDimensionStyle({ name: style.name }); onEvent?.(`dimensionStyle:${style.id}`) }}
        />
      </div>
      <div className="app-sw-window">
        <SWHeaderActions showPopupGuide={false} onPrint={() => onEvent?.("print")} />
      </div>
    </SWTheme>
  )
}