HMDesign/src/sw/sw-popup.stories.tsx

import { useId, useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import {
  SWHeaderInput, SWHeaderPropertyPanel, SWPopup, SWPopupPropertyRow, SWPopupRow, SWPopupSection, SWSelect, SWSlider, SWTheme,
  type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty,
} from "@hm-design/sw"
import "@hm-design/sw/styles.css"
import { Button, Switch } from "@hm-design/ui"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import "./sw-stories.css"
import "./sw-integrated-stories.css"

// SWPopup (2026-10-19): the SW property window frame with free children. Public API only, like a consuming
// project. HM UI components are placed inside to show that the content is not restricted.
const LAYERS: SWHeaderLayer[] = [
  { id: "0", name: "0", color: "#ffffff" },
  { id: "wall", name: "WALL", color: "#ff4242" },
  { id: "dim", name: "DIM", color: "#47af91" },
  { id: "hatch", name: "HATCH", color: "#5aa0ff" },
]
const COLORS: SWHeaderColorOption[] = [
  { id: "red", color: "#ff0000", label: "빨강" }, { id: "yellow", color: "#ffff00", label: "노랑" },
  { id: "green", color: "#00ff00", label: "초록" }, { id: "blue", color: "#0000ff", label: "파랑" },
]

const UNITS = ["mm", "cm", "m"].map(value => ({ value }))
const MENUS = { layers: LAYERS, colors: COLORS }
const layerProperty = (value: string): SWHeaderProperty => ({ id: "layer", name: "레이어", value, type: "select", groupId: "popup", picker: "layer", options: LAYERS.map(({ id, name }) => ({ id, name })) })

const meta = {
  title: "SW/Popup",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

function useLog() {
  const [log, setLog] = useState<string[]>([])
  const view = <p className="sw-story-log" aria-live="polite" data-callback-log="">Callback: {log.length ? log.join(" → ") : "없음"}</p>
  return [view, (line: string) => setLog(lines => [...lines.slice(-9), line])] as const
}

function SettingsPopup({ record }: { record: (line: string) => void }) {
  const ids = { name: useId(), scale: useId(), unit: useId(), snap: useId() }
  const [name, setName] = useState("평면도-01")
  const [scale, setScale] = useState("100")
  const [layerId, setLayerId] = useState("wall")
  const [color, setColor] = useState("255,0,0")
  const [snap, setSnap] = useState(true)
  const [opacity, setOpacity] = useState(60)
  const [unit, setUnit] = useState("mm")
  return (
    <SWPopup title="도면 설정" onClose={() => record("settings.onClose")} data-popup="settings">
      <SWPopupSection title="도면">
        <SWPopupRow label="이름" htmlFor={ids.name}>
          <SWHeaderInput id={ids.name} value={name} onCommit={next => { setName(next); record(`name=${next}`) }} />
        </SWPopupRow>
        <SWPopupRow label="축척" htmlFor={ids.scale} unit="%" numeric>
          <SWHeaderInput id={ids.scale} valueType="number" value={scale} onCommit={next => { setScale(next); record(`scale=${next}`) }} />
        </SWPopupRow>
        <SWPopupRow label="단위" htmlFor={ids.unit} field="none">
          <SWSelect id={ids.unit} value={unit} options={UNITS} onValueChange={next => { setUnit(next); record(`unit=${next}`) }} data-sw-select="unit" />
        </SWPopupRow>
      </SWPopupSection>
      {/* 2026-10-20: popup layer / color controls are the property window pickers (SWPopupPropertyRow), not the
          SWHeader field dropdowns (header-only design). */}
      <SWPopupSection title="레이어 · 색상">
        <SWPopupPropertyRow property={layerProperty(layerId)} menus={MENUS}
          onPropertyChange={(_, value) => { setLayerId(value); record(`layer=${value}`) }} />
        <SWPopupPropertyRow property={{ id: "color", name: "색상", value: color, type: "color", groupId: "popup" }} menus={MENUS}
          onPropertyChange={(_, value) => { setColor(value); record(`color=${value}`) }} />
      </SWPopupSection>
      {/* 2026-10-20: the gauge is the SW gauge (SWSlider; 2026-10-22: style B, appearance="property", on this page).
          SW has no normal-mode switch, so 스냅 stays the HM UI Switch. */}
      <SWPopupSection title="스냅 · 투명도">
        <SWPopupRow label="스냅" htmlFor={ids.snap} field="none">
          <Switch id={ids.snap} checked={snap} onCheckedChange={next => { setSnap(next); record(`snap=${next}`) }} data-ui-switch="" />
        </SWPopupRow>
        <SWPopupRow label="투명도" field="none">
          <SWSlider appearance="property" value={opacity} min={0} max={100} step={10} onValueChange={setOpacity} onValueCommit={next => record(`opacity=${next}`)} aria-label="투명도" data-popup-slider="" />
        </SWPopupRow>
      </SWPopupSection>
      <div className="sw-story-popup-actions">
        <Button variant="secondary" size="sm" onClick={() => record("cancel")}>취소</Button>
        <Button size="sm" onClick={() => record("apply")} data-ui-apply="">적용</Button>
      </div>
    </SWPopup>
  )
}

function ObjectInfoPopup({ record }: { record: (line: string) => void }) {
  const [x, setX] = useState("1200.5")
  return (
    <SWPopup title="객체 정보 · Beam-01" onClose={() => record("object.onClose")} data-popup="object">
      <SWPopupSection title="객체">
        <SWPopupRow label="이름" readOnly><SWHeaderInput value="Beam-01" readOnly aria-label="이름" /></SWPopupRow>
        <SWPopupRow label="타입" readOnly><SWHeaderInput value="Line" readOnly aria-label="타입" /></SWPopupRow>
        <SWPopupRow label="길이" unit="mm" readOnly><SWHeaderInput value="3000.0000" readOnly aria-label="길이" /></SWPopupRow>
      </SWPopupSection>
      <SWPopupSection title="좌표">
        <SWPopupRow label="X" unit="mm" numeric><SWHeaderInput valueType="number" value={x} aria-label="X" onCommit={next => { setX(next); record(`x=${next}`) }} /></SWPopupRow>
        <SWPopupRow label="Y" field="compact"><SWHeaderInput valueType="number" value="20" aria-label="Y" onCommit={next => record(`y=${next}`)} /></SWPopupRow>
      </SWPopupSection>
    </SWPopup>
  )
}

function PanelWithChildren({ record }: { record: (line: string) => void }) {
  const [properties, setProperties] = useState<SWHeaderProperty[]>([
    { id: "layer", name: "레이어", value: "wall", type: "select", groupId: "common", picker: "layer", options: LAYERS.map(({ id, name }) => ({ id, name })) },
    { id: "color", name: "색상", value: "255,66,66", type: "color", groupId: "common" },
    { id: "width", name: "선가중치", value: "0.25", type: "number", groupId: "common" },
  ])
  return (
    <SWHeaderPropertyPanel title="레이어 속성 + 추가 콘텐츠" groups={[{ id: "common", name: "공통" }]} properties={properties}
      menus={{ layers: LAYERS }} onClose={() => record("panel.onClose")}
      onPropertyChange={(property, value) => { setProperties(list => list.map(item => item.id === property.id ? { ...item, value } : item)); record(`${property.id}=${value}`) }}>
      <SWPopupSection title="메모">
        <SWPopupRow label="설명"><SWHeaderInput value="외벽" aria-label="설명" onCommit={next => record(`memo=${next}`)} /></SWPopupRow>
      </SWPopupSection>
    </SWHeaderPropertyPanel>
  )
}

/** SWSlider style B (appearance="property", 2026-10-22: the only gauge look on this page): value, entry and disabled. */
function OpacityPopup({ record }: { record: (line: string) => void }) {
  const [opacity, setOpacity] = useState(40)
  return (
    <SWPopup title="투명도" data-popup="opacity">
      <SWPopupSection title="투명도">
        <SWPopupRow label="투명도" field="none" unit="%">
          <SWSlider appearance="property" value={opacity} min={0} max={100} step={10} aria-label="투명도 B" data-sw-slider="property"
            onValueChange={setOpacity} onValueCommit={next => record(`opacity(property)=${next}`)} />
        </SWPopupRow>
        <SWPopupRow label="값" field="compact" unit="%">
          <SWHeaderInput valueType="number" value={String(opacity)} aria-label="투명도 값" onCommit={next => { setOpacity(Math.min(100, Math.max(0, Number(next)))); record(`opacity=${next}`) }} />
        </SWPopupRow>
        <SWPopupRow label="비활성" field="none" unit="%" disabled><SWSlider appearance="property" value={opacity} disabled aria-label="투명도 (비활성)" /></SWPopupRow>
      </SWPopupSection>
    </SWPopup>
  )
}

function PopupPage() {
  const [log, record] = useLog()
  return (
    <StoryPage>
      <StoryPageHeader title="SW Popup — 외형 고정, 콘텐츠 자유"
        description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
      {log}
      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)·투명도 게이지바(SWSlider)와, SW에 없는 컨트롤인 HM UI Switch·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
        <SWTheme className="sw-story-popups" data-popups="">
          <SettingsPopup record={record} />
          <ObjectInfoPopup record={record} />
          <PanelWithChildren record={record} />
        </SWTheme>
      </StorySection>
      <StorySection title="투명도 게이지바 (SWSlider)">
        <SWTheme className="sw-story-popups" data-slider-popups="">
          <OpacityPopup record={record} />
        </SWTheme>
      </StorySection>
    </StoryPage>
  )
}

// 2026-10-22 (user request): SW/Popup keeps only Property Panel in the sidebar; these two stay for the browser tests
// (verification tag: ID and direct URL kept).
export const CustomContent: Story = { name: "Custom Content", tags: ["verification"], render: () => <PopupPage /> }

function StackPage() {
  const [log, record] = useLog()
  const [open, setOpen] = useState(["a", "b", "c"])
  const [layerB, setLayerB] = useState("wall")
  const close = (id: string) => { setOpen(list => list.filter(item => item !== id)); record(`close(${id})`) }
  const rows = Array.from({ length: 30 }, (_, index) => index + 1)
  return (
    <StoryPage>
      <StoryPageHeader title="여러 Popup · Escape · 스크롤"
        description="Popup 안의 Escape는 그 Popup만 닫습니다. 바깥의 Escape는 가장 최근에 열리거나 사용한 Popup 하나만 닫습니다. Dropdown·편집 중인 Input이 처리한 Escape로는 닫히지 않습니다. 긴 콘텐츠는 본문이 스크롤됩니다." />
      {log}
      <SWTheme className="sw-story-popups" data-stack="">
        {open.includes("a") && <SWPopup title="Popup A" onClose={() => close("a")} data-popup="a"><SWPopupSection title="A"><SWPopupRow label="값" field="none" readOnly><span data-readonly-value="a">A</span></SWPopupRow></SWPopupSection></SWPopup>}
        {open.includes("b") && <SWPopup title="Popup B" onClose={() => close("b")} data-popup="b"><SWPopupSection title="B">
          <SWPopupPropertyRow property={layerProperty(layerB)} menus={MENUS} onPropertyChange={(_, value) => { setLayerB(value); record(`b.layer=${value}`) }} />
        </SWPopupSection></SWPopup>}
        {open.includes("c") && <SWPopup title="Popup C · 긴 콘텐츠" onClose={() => close("c")} data-popup="c" style={{ maxHeight: 360 }}>
          <SWPopupSection title="많은 필드">{rows.map(row => <SWPopupRow key={row} label={`필드 ${row}`} unit="mm" numeric><SWHeaderInput valueType="number" value={String(row)} aria-label={`필드 ${row}`} /></SWPopupRow>)}</SWPopupSection>
        </SWPopup>}
      </SWTheme>
    </StoryPage>
  )
}

export const MultiplePopups: Story = { name: "Multiple Popups", tags: ["verification"], render: () => <StackPage /> }