HMDesign/packages/sw/src/components/sw-viewer/SWViewerHeader.tsx

import { forwardRef, useId, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react"
import { SWViewerMenu } from "./SWViewerMenu"
import { SWViewerSwitch } from "./SWViewerControls"
import { SWViewerIcon } from "./SWViewerIcon"
import type { SWViewerCommand, SWViewerHeaderGroup, SWViewerHeaderItem, SWViewerMenuEntry } from "./types"
import "../../theme/sw-viewer.css"

export interface SWViewerHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  /**
   * Logo image URL of the program (same prop as SWHeader), max 24px high on the slanted green cap.
   * The logo belongs to each program: nothing is rendered when omitted (no default text or icon) and the cap
   * shrinks to its slanted edge.
   */
  logoSrc?: string
  /** Logo element (inline SVG, <img>, ...). Takes precedence over `logoSrc` (same prop as SWHeader). */
  logo?: ReactNode
  /** Accessible product name (same prop as SWHeader). With `onHomeClick` the button is "<logoAlt> 홈". */
  logoAlt?: string
  /** Makes the logo cap a button (e.g. back to the normal SW mode). Same prop as SWHeader. */
  onHomeClick?: () => void
  /** Open file name. `null` / empty shows `documentPlaceholder`. */
  documentTitle?: string | null
  /** Default `열린 도면 없음`. */
  documentPlaceholder?: string
  /** Tooltip of the file name. Default: the name, or `파일 열기 또는 샘플을 선택하세요`. */
  documentTooltip?: string
  /** Replaces the file-name text (the dark document well stays). */
  document?: ReactNode
  /** Menu data, in order. Groups with `placement="end"` form the trailing action area. */
  groups: SWViewerHeaderGroup[]
  /** Free content after the trailing groups (status, info button, ...). */
  trailing?: ReactNode
  /** Every command of the header and its dropdowns (after the item's own callback). */
  onCommand?: (command: SWViewerCommand) => void
  /** Accessible name of the More button. Default `추가 도구`. */
  moreLabel?: string
  /** Accessible name of the object surface. Default `도면 작업 도구`. */
  toolbarLabel?: string
}

const MoreIcon = () => (
  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor"><circle cx="3" cy="8" r="1.4" /><circle cx="8" cy="8" r="1.4" /><circle cx="13" cy="8" r="1.4" /></svg>
)
const ChevronDown = () => (
  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
)

const isShown = (item: { hidden?: boolean; collapseBelow?: number }, width: number) => !item.hidden && !(item.collapseBelow !== undefined && width < item.collapseBelow)

/** More entries of the collapsed items, one section per group (menus and tabs get their own section). */
function moreEntries(groups: SWViewerHeaderGroup[], width: number, command: (c: SWViewerCommand) => void, owners: Map<string, string>): SWViewerMenuEntry[] {
  const sections: SWViewerMenuEntry[][] = []
  // Dropdown entries keep their own callbacks; the More menu reports them to onCommand with their owner item.
  const own = (entries: SWViewerMenuEntry[], itemId: string) => entries.forEach(entry => { owners.set(entry.id, itemId); if (entry.type === "submenu") own(entry.entries, itemId) })
  for (const group of groups) {
    if (group.hidden) continue
    const collapsed = group.items.filter(item => !item.hidden && item.collapseBelow !== undefined && width < item.collapseBelow)
    let plain: SWViewerMenuEntry[] = []
    const flush = () => { if (plain.length) sections.push([{ type: "label", id: `${group.id}:more`, label: group.moreLabel ?? group.label }, ...plain]); plain = [] }
    for (const item of collapsed) {
      if (item.type === "custom") { if (item.menuEntries?.length) { flush(); own(item.menuEntries, item.id); sections.push(item.menuEntries) } continue }
      if (item.type === "menu") {
        flush()
        own(item.entries, item.id)
        sections.push([{ type: "label", id: `${item.id}:more`, label: item.moreLabel ?? item.label },
          ...item.entries.map(entry => (entry.type === "label" || entry.type === "separator" ? entry : { ...entry, disabled: entry.disabled || item.disabled }))])
      } else if (item.type === "tabs") {
        flush()
        sections.push([{ type: "label", id: `${item.id}:more`, label: item.moreLabel ?? item.label }, ...item.options.map(option => ({
          type: "radio" as const, id: `${item.id}:${option.value}`, checked: option.value === item.value, disabled: option.disabled || item.disabled,
          label: option.count !== undefined && option.count > 0 ? `${option.label} · ${option.count.toLocaleString()}개` : option.label,
          onSelect: () => { item.onValueChange?.(option.value); command({ id: item.id, itemId: item.id, value: option.value }) },
        }))])
      } else if (item.type === "button") {
        plain.push({ type: "item", id: item.id, label: item.label, icon: item.icon, disabled: item.disabled, onSelect: () => { item.onSelect?.(); command({ id: item.id, itemId: item.id }) } })
      } else {
        const checked = item.type === "toggle" ? item.pressed : item.checked
        plain.push({ type: "checkbox", id: item.id, label: item.label, checked, disabled: item.disabled, onCheckedChange: next => {
          if (item.type === "toggle") item.onPressedChange?.(next); else item.onCheckedChange?.(next)
          command({ id: item.id, itemId: item.id, value: next })
        } })
      }
    }
    flush()
  }
  return sections.flatMap((section, index) => (index ? [{ type: "separator" as const, id: `more-sep-${index}` }, ...section] : section))
}

function MenuButton({ item, iconOnly, onCommand }: { item: Extract<SWViewerHeaderItem, { type: "menu" }>; iconOnly: boolean | "always"; onCommand: (c: SWViewerCommand) => void }) {
  const ref = useRef<HTMLButtonElement>(null)
  const [open, setOpen] = useState(false)
  const [focus, setFocus] = useState<"first" | "menu">("menu")
  const menuId = useId()
  const show = (how: "first" | "menu") => { setFocus(how); setOpen(true) }
  return (
    <>
      <button ref={ref} type="button" className="hm-sw-viewer-header__button" data-kind="menu" data-icon-only={iconOnly === "always" ? "always" : iconOnly ? "" : undefined} data-state={open ? "open" : undefined}
        aria-haspopup="menu" aria-expanded={open} aria-controls={open ? menuId : undefined} aria-label={iconOnly ? item.label : undefined} title={item.title} disabled={item.disabled}
        onClick={() => (open ? setOpen(false) : show("menu"))}
        onKeyDown={event => { if (event.key === "ArrowDown" || ((event.key === "Enter" || event.key === " ") && !open)) { event.preventDefault(); show("first") } }}>
        {item.icon && <span className="hm-sw-viewer-header__icon" aria-hidden="true"><SWViewerIcon>{item.icon}</SWViewerIcon></span>}
        {!iconOnly && <span className="hm-sw-viewer-header__label">{item.label}</span>}
        <span className="hm-sw-viewer-header__chevron"><SWViewerIcon><ChevronDown /></SWViewerIcon></span>
      </button>
      <SWViewerMenu id={menuId} entries={item.entries} open={open} onOpenChange={setOpen} anchorRef={ref} align={item.menuAlign} width={item.menuWidth} label={item.label} initialFocus={focus}
        onEntrySelect={entry => onCommand({ id: entry.id, itemId: item.id, value: entry.type === "checkbox" ? !entry.checked : undefined })} />
    </>
  )
}

function Tabs({ item, onCommand }: { item: Extract<SWViewerHeaderItem, { type: "tabs" }>; onCommand: (c: SWViewerCommand) => void }) {
  const select = (value: string) => { item.onValueChange?.(value); onCommand({ id: item.id, itemId: item.id, value }) }
  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    const keys = ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"]
    if (!keys.includes(event.key)) return
    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)'))
    const index = buttons.indexOf(document.activeElement as HTMLButtonElement)
    if (index < 0) return
    event.preventDefault()
    const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length
    buttons[next].focus()
    buttons[next].click()
  }
  const current = item.options.some(option => option.value === item.value) ? item.value : item.options.find(option => !option.disabled)?.value
  return (
    <div role="radiogroup" aria-label={item.label} className="hm-sw-viewer-header__tabs" onKeyDown={onKeyDown}>
      {item.options.map(option => {
        const selected = option.value === item.value
        return (
          <button key={option.value} type="button" role="radio" aria-checked={selected} tabIndex={option.value === current ? 0 : -1}
            className="hm-sw-viewer-header__tab" data-state={selected ? "active" : undefined} title={option.title} disabled={item.disabled || option.disabled}
            onClick={() => { if (!selected) select(option.value) }}>
            {option.label}
            {option.count !== undefined && option.count > 0 && <span className="hm-sw-viewer-header__count">{option.count.toLocaleString()}</span>}
          </button>
        )
      })}
    </div>
  )
}

function SwitchField({ item, onCommand }: { item: Extract<SWViewerHeaderItem, { type: "switch" }>; onCommand: (c: SWViewerCommand) => void }) {
  const id = useId()
  return (
    <div className="hm-sw-viewer-header__switch-field" title={item.title}>
      <label htmlFor={id} className="hm-sw-viewer-header__switch-label">{item.label}</label>
      <SWViewerSwitch id={id} checked={item.checked} disabled={item.disabled}
        onCheckedChange={next => { item.onCheckedChange?.(next); onCommand({ id: item.id, itemId: item.id, value: next }) }} />
    </div>
  )
}

function Item({ item, width, onCommand }: { item: SWViewerHeaderItem; width: number; onCommand: (c: SWViewerCommand) => void }) {
  if (item.type === "custom") return <>{item.render()}</>
  const iconOnly = !!item.icon && (item.iconOnly ? "always" : item.iconOnlyBelow !== undefined && width < item.iconOnlyBelow)
  if (item.type === "menu") return <MenuButton item={item} iconOnly={iconOnly} onCommand={onCommand} />
  if (item.type === "tabs") return <Tabs item={item} onCommand={onCommand} />
  if (item.type === "switch") return <SwitchField item={item} onCommand={onCommand} />
  const toggle = item.type === "toggle"
  return (
    <SWViewerHeaderButton label={item.label} icon={item.icon} iconOnly={iconOnly === "always" ? true : iconOnly ? "compact" : false} pressed={toggle ? item.pressed : undefined} title={item.title} disabled={item.disabled}
      onClick={() => {
        if (toggle) { item.onPressedChange?.(!item.pressed); onCommand({ id: item.id, itemId: item.id, value: !item.pressed }) }
        else { item.onSelect?.(); onCommand({ id: item.id, itemId: item.id }) }
      }} />
  )
}

export interface SWViewerHeaderButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /** Visible text, or the accessible name when `iconOnly`. */
  label: string
  /** 16px icon supplied by the program. */
  icon?: ReactNode
  /**
   * `true`: always icon only, the 32 x 40 icon button (info, More). `"compact"`: the 34 x 34 command button shown
   * without its label (what `iconOnlyBelow` does). Default false.
   */
  iconOnly?: boolean | "compact"
  /** Toggle state (aria-pressed, #FFC600 when on). Leave undefined for a command button. */
  pressed?: boolean
}

/**
 * The viewer header button for the `trailing` slot or a `custom` item (e.g. the info button that opens a modal
 * SWViewerPanel). Same look as the data-driven items: transparent, #266651 hover, #FFC600 when pressed.
 */
export const SWViewerHeaderButton = forwardRef<HTMLButtonElement, SWViewerHeaderButtonProps>(function SWViewerHeaderButton(
  { label, icon, iconOnly = false, pressed, className, type = "button", ...rest }, ref,
) {
  const kind = pressed === undefined ? "button" : "toggle"
  return (
    <button ref={ref} type={type} className={`hm-sw-viewer-header__button${className ? ` ${className}` : ""}`} data-kind={kind} data-icon-only={iconOnly === true ? "always" : iconOnly ? "" : undefined}
      data-state={pressed === undefined ? undefined : pressed ? "on" : "off"} aria-pressed={pressed} aria-label={iconOnly ? label : undefined} {...rest}>
      {icon && <span className="hm-sw-viewer-header__icon" aria-hidden="true"><SWViewerIcon>{icon}</SWViewerIcon></span>}
      {!iconOnly && <span className="hm-sw-viewer-header__label">{label}</span>}
    </button>
  )
})

/**
 * SW viewer-mode header (reference DWG/DXF viewer top menu): slanted brand cap → dark file-name well → one green
 * object surface holding data-driven menu groups, with a trailing action area. Items move into the More dropdown
 * by `collapseBelow` (measured header width, never horizontal scroll). Pure presentation: values are props, every
 * action is a callback (`onCommand` plus each item's own). Use SWHeader for the normal SW mode.
 */
export const SWViewerHeader = forwardRef<HTMLElement, SWViewerHeaderProps>(function SWViewerHeader(
  {
    logo, logoSrc, logoAlt, onHomeClick, documentTitle, documentPlaceholder = "열린 도면 없음", documentTooltip, document: documentNode,
    groups, trailing, onCommand, moreLabel = "추가 도구", toolbarLabel = "도면 작업 도구", className, ...rest
  },
  forwardedRef,
) {
  const rootRef = useRef<HTMLElement | null>(null)
  const [width, setWidth] = useState(1920)
  const gradientId = `hm-sw-viewer-brand-${useId().replace(/:/g, "")}`
  useLayoutEffect(() => {
    const root = rootRef.current
    if (!root) return
    const update = () => setWidth(root.getBoundingClientRect().width)
    update()
    const observer = new ResizeObserver(update)
    observer.observe(root)
    return () => observer.disconnect()
  }, [])
  const command = (value: SWViewerCommand) => onCommand?.(value)
  const owners = new Map<string, string>()
  const more = moreEntries(groups, width, command, owners)
  const moreRef = useRef<HTMLButtonElement>(null)
  const [moreOpen, setMoreOpen] = useState(false)
  const [moreFocus, setMoreFocus] = useState<"first" | "menu">("menu")
  const renderGroup = (group: SWViewerHeaderGroup) => {
    const items = group.items.filter(item => isShown(item, width))
    if (group.hidden || !items.length) return null
    return (
      <div key={group.id} role="group" aria-label={group.label} className="hm-sw-viewer-header__group" data-surface={group.surface ?? "plain"} data-group={group.id}>
        {items.map(item => <Item key={item.id} item={item} width={width} onCommand={command} />)}
      </div>
    )
  }
  const start = groups.filter(group => group.placement !== "end")
  const end = groups.filter(group => group.placement === "end")
  const name = documentTitle || documentPlaceholder
  const mark = logo ?? (logoSrc ? <img src={logoSrc} alt="" /> : null)
  const brandContent = (
    <>
      <svg className="hm-sw-viewer-header__brand-shape" viewBox="0 0 88 52" preserveAspectRatio="xMaxYMid slice" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--hm-sw-viewer-brand-top)" />
            <stop offset="45%" stopColor="var(--hm-sw-viewer-brand-middle)" />
            <stop offset="100%" stopColor="var(--hm-sw-viewer-brand-bottom)" />
          </linearGradient>
        </defs>
        <path d="M 0 0 H 88 L 73 44 Q 70 52 62 52 H 0 Z" fill={`url(#${gradientId})`} />
        <path d="M 88 0 L 73 44 Q 70 52 62 52 H 0" fill="none" stroke="var(--hm-sw-viewer-brand-middle)" vectorEffect="non-scaling-stroke" />
      </svg>
      {mark && <span className="hm-sw-viewer-header__brand-mark" aria-hidden="true">{mark}</span>}
    </>
  )
  return (
    <header ref={node => { rootRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node }}
      className={`hm-sw-theme hm-sw-viewer-header${className ? ` ${className}` : ""}`} {...rest}>
      {onHomeClick
        ? <button type="button" className="hm-sw-viewer-header__brand" data-logo={mark ? "" : undefined} aria-label={logoAlt ? `${logoAlt} 홈` : "홈"} title={logoAlt} onClick={onHomeClick}>{brandContent}</button>
        : <div className="hm-sw-viewer-header__brand" data-logo={mark ? "" : undefined} role={logoAlt ? "img" : undefined} aria-label={logoAlt}>{brandContent}</div>}
      <div className="hm-sw-viewer-header__document" role="group" aria-label="현재 도면">
        {documentNode ?? <span className="hm-sw-viewer-header__document-name" data-empty={!documentTitle || undefined} title={documentTooltip ?? (documentTitle || "파일 열기 또는 샘플을 선택하세요")}>{name}</span>}
      </div>
      <div className="hm-sw-viewer-header__object" role="toolbar" aria-label={toolbarLabel}>
        {start.map(renderGroup)}
        {more.length > 0 && <>
          <button ref={moreRef} type="button" className="hm-sw-viewer-header__button hm-sw-viewer-header__more" data-icon-only="always" data-state={moreOpen ? "open" : undefined}
            aria-label={moreLabel} title="더보기" aria-haspopup="menu" aria-expanded={moreOpen}
            onClick={() => { setMoreFocus("menu"); setMoreOpen(!moreOpen) }}
            onKeyDown={event => { if (event.key === "ArrowDown") { event.preventDefault(); setMoreFocus("first"); setMoreOpen(true) } }}>
            <span className="hm-sw-viewer-header__icon"><SWViewerIcon><MoreIcon /></SWViewerIcon></span>
          </button>
          <SWViewerMenu entries={more} open={moreOpen} onOpenChange={setMoreOpen} anchorRef={moreRef} align="end" width={260} surface="beige" label={moreLabel} initialFocus={moreFocus}
            onEntrySelect={entry => {
              const owner = owners.get(entry.id)
              if (owner) command({ id: entry.id, itemId: owner, value: entry.type === "checkbox" ? !entry.checked : undefined })
            }} />
        </>}
        {(end.length > 0 || trailing) && <div className="hm-sw-viewer-header__actions">{end.map(renderGroup)}{trailing}</div>}
      </div>
    </header>
  )
})