// Example E — the SW popup frame with project content (no Header). SWPopup keeps the property window design;
// children are free: SWPopupSection / SWPopupRow rows with SWHeaderInput, and an existing SW dropdown.
import { useId, useState } from "react"
import { SWHeaderLayerMenu, SWHeaderInput, SWPopup, SWPopupRow, SWPopupSection, SWTheme } from "@hm-design/sw"
import { layers } from "./sample-data"

export function ExampleECustomPopup({ onEvent }: { onEvent?: (name: string) => void }) {
  const [open, setOpen] = useState(true)
  const nameId = useId()
  const [name, setName] = useState("평면도-01")
  const [scale, setScale] = useState("100")
  const [x, setX] = useState("1200.5")
  const [activeLayerId, setActiveLayerId] = useState("0")
  if (!open) return <button type="button" onClick={() => setOpen(true)}>설정 열기</button>
  return (
    <SWTheme>
      <SWPopup title="도면 설정" onClose={() => { setOpen(false); onEvent?.("popup:close") }}>
        <SWPopupSection title="도면">
          <SWPopupRow label="이름" htmlFor={nameId}>
            <SWHeaderInput id={nameId} value={name} onCommit={next => { setName(next); onEvent?.(`name:${next}`) }} />
          </SWPopupRow>
          <SWPopupRow label="축척" unit="%" numeric>
            <SWHeaderInput aria-label="축척" valueType="number" value={scale} onCommit={next => { setScale(next); onEvent?.(`scale:${next}`) }} />
          </SWPopupRow>
        </SWPopupSection>
        <SWPopupSection title="객체 정보">
          <SWPopupRow label="타입" readOnly><SWHeaderInput aria-label="타입" value="Line" readOnly /></SWPopupRow>
          <SWPopupRow label="X" unit="mm" numeric>
            <SWHeaderInput aria-label="X" valueType="number" value={x} onCommit={next => { setX(next); onEvent?.(`x:${next}`) }} />
          </SWPopupRow>
        </SWPopupSection>
        <SWPopupSection title="레이어">
          {/* Inside a popup the dropdown opens as a fixed overlay, so the scrolling body never clips it. */}
          <SWHeaderLayerMenu value={{ name: "0" }} layers={layers} activeLayerId={activeLayerId}
            onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }} />
        </SWPopupSection>
      </SWPopup>
    </SWTheme>
  )
}