// Example I — SW Footer (general mode): the bottom command bar with its command line, layout tabs and data.
// Commands are not run here: the host receives callbacks and updates the props.
import { useState } from "react"
import {
  SWFooter, SWFooterCommandLine, SWFooterLayoutTabs, SW_FOOTER_MODEL, swFooterAuxIcons, swFooterToolIcons,
  type SWFooterAuxItem, type SWFooterCategory, type SWFooterLayout,
} from "@hm-design/sw"

const categories: SWFooterCategory[] = [
  { id: "shape", label: "도형", tools: [
    { id: "line", label: "LINE", ...swFooterToolIcons.line },
    { id: "pline", label: "PLINE", ariaLabel: "Polyline", ...swFooterToolIcons.pline },
    { id: "circle", label: "CIRCLE", ...swFooterToolIcons.circle },
    { id: "rect", label: "RECTA...", ariaLabel: "Rectangle", ...swFooterToolIcons.rect },
  ] },
  { id: "modify", label: "수정", tools: [{ id: "ncopy", label: "NCOPY", ...swFooterToolIcons.ncopy }] },
  { id: "layer", label: "레이어", tools: [] },
]

export function ExampleIFooter({ onEvent }: { onEvent?: (name: string) => void }) {
  const [categoryId, setCategoryId] = useState("shape")
  const [running, setRunning] = useState<string | null>(null)
  const [aux, setAux] = useState<SWFooterAuxItem[]>([
    { id: "objectSnap", label: "객체스냅", icon: swFooterAuxIcons.objectSnap, pressed: true },
    { id: "orthogonal", label: "직각교차", icon: swFooterAuxIcons.orthogonal, pressed: false },
    { id: "gridSnap", label: "격자스냅", icon: swFooterAuxIcons.gridSnap, pressed: false },
  ])
  const [layouts, setLayouts] = useState<SWFooterLayout[]>([{ id: "l2", label: "Layout 02" }, { id: "l1", label: "Layout 01" }])
  const [space, setSpace] = useState(SW_FOOTER_MODEL)
  const [history, setHistory] = useState<string[]>(["Command: LINE", "Specify first point:"])
  const [listOpen, setListOpen] = useState(false)
  const run = (command: string) => { setHistory(lines => [...lines, `Command: ${command}`]); onEvent?.(`command:${command}`) }
  return (
    <div className="example-screen">
      <main className="example-canvas" />
      <SWFooter
        status="0.0000, 0.0000, 0.0000"
        command={<SWFooterCommandLine history={history} onSubmit={run} expanded={listOpen} onExpandedChange={setListOpen} />}
        categories={categories} categoryId={categoryId} onCategoryChange={setCategoryId}
        activeToolId={running} onToolSelect={toolId => { setRunning(toolId); run(toolId.toUpperCase()) }}
        onSlotAdd={(slotIndex, category) => onEvent?.(`register:${category}#${slotIndex}`)}
        auxItems={aux} onAuxPressedChange={(id, pressed) => setAux(items => items.map(item => (item.id === id ? { ...item, pressed } : item)))}
        auxAll={{ onClick: () => onEvent?.("auxAll") }}
        commandAll={{ onClick: () => setListOpen(open => !open), pressed: listOpen }}
        layoutTabs={<SWFooterLayoutTabs layouts={layouts} value={space} onValueChange={setSpace}
          onAdd={() => setLayouts(list => [{ id: `l${list.length + 1}`, label: `Layout 0${list.length + 1}` }, ...list])}
          onRemove={id => { setLayouts(list => list.filter(item => item.id !== id)); if (space === id) setSpace(SW_FOOTER_MODEL) }}
          onRename={(id, label) => setLayouts(list => list.map(item => (item.id === id ? { ...item, label } : item)))} />}
      />
    </div>
  )
}