// Example J — SW theme tokens (both modes). The only official way to change SW tokens: `style` (or the program's own
// class) on the OUTERMOST SW scope. Here one <SWTheme> wraps the viewer screen, so the header, its dropdowns, More,
// and every panel read the same value. Portals leave the DOM tree: wrap their content in <SWTheme> with the same style.
// The font below is a placeholder for a program decision: the SW default is Noto Sans KR (2026-10-20) and needs no
// token, so only set it when the program has decided on another font. Never copy the Web UI font token here.
import { useState, type CSSProperties } from "react"
import { createPortal } from "react-dom"
import {
  SWTheme, SWViewerButton, SWViewerHeader, SWViewerHint, SWViewerPanel, SWViewerSection,
  type SWViewerHeaderGroup,
} from "@hm-design/sw"

/** One theme object for the screen and for every portal. Token names only (`--hm-sw-*`), never `hm-sw-*` classes. */
export const appSWTheme = {
  "--hm-sw-header-font-family": '"Malgun Gothic", "Apple SD Gothic Neo", sans-serif',
} as CSSProperties

export function ExampleJTheme({ onEvent }: { onEvent?: (name: string) => void }) {
  const [options, setOptions] = useState(false)
  const [notice, setNotice] = useState(false)
  const groups: SWViewerHeaderGroup[] = [
    { id: "file", label: "파일", items: [
      { type: "menu", id: "samples", label: "샘플", collapseBelow: 1180, entries: [
        { type: "item", id: "sample-a", label: "기본 도면 · DWG", onSelect: () => onEvent?.("sample-a") },
      ] },
    ] },
    { id: "panels", label: "패널", placement: "end", items: [
      { type: "toggle", id: "options", label: "설정", pressed: options, collapseBelow: 900, onPressedChange: setOptions },
      { type: "button", id: "notice", label: "알림", onSelect: () => setNotice(true) },
    ] },
  ]
  return (
    // Outermost SW scope: header, dropdown, More and panel inherit `appSWTheme`.
    <SWTheme style={appSWTheme}>
      <SWViewerHeader documentTitle="BasicSample.dwg" groups={groups} onCommand={command => onEvent?.(command.id)} />
      <SWViewerPanel title="옵션" open={options} onClose={() => setOptions(false)} width={320} height="auto">
        <SWViewerSection title="표시"><SWViewerHint>Header와 같은 토큰 값을 씁니다.</SWViewerHint></SWViewerSection>
      </SWViewerPanel>
      {/* A program portal renders outside the scope above: give it its own <SWTheme> with the same style. */}
      {notice && createPortal(
        <SWTheme style={{ ...appSWTheme, position: "fixed", right: 24, bottom: 24 }}>
          <SWViewerSection title="알림">
            <SWViewerHint>Portal 안에서도 같은 SW 토큰이 적용됩니다.</SWViewerHint>
            <SWViewerButton variant="primary" onClick={() => setNotice(false)}>확인</SWViewerButton>
          </SWViewerSection>
        </SWTheme>,
        document.body,
      )}
    </SWTheme>
  )
}