/* =============================================================================
 * ui_template_toolbar.ts
 * 도구줄 `toolbar`(552-4 틀) — 단추 · 찾기 · 고르기를 한 줄에 묶음 · 나눔선 · 오른쪽 끝 밀기.
 *   꼴   = 보통(바탕 없음) · 유리(glass · 그림 위에 뜸) · 나눔선("divider") · 빈 칸 밀기("spacer")
 *   크기 = data-size 24 · 28 · 32(기본 28) — 크기 단이 없는 단추 · 아이콘 단추 · 입력 · 고르기에 같은 단을 붙임
 *   상태 = 줄 자체는 없음(안 단추가 제 상태를 가짐)
 *   쓰는 법 = createToolbar({ items: [createIconButton({ icon: "search", title: "찾기" }), "divider", "spacer", saveBtn] })
 *   대신하는 옛 변종 = `.ui-btn-group`(붙은 묶음은 그대로 씀) · `.ui-group-cards__bar` · `b05-routeedit__tools` ·
 *     `b04-map__controls` · `b08-hydro__toolbar` · `b09-estimation__tools` · `m01-logic__bar` · M02 `*__bar` · `*__tools` 약 20
 * ========================================================================== */

import { setUiSize } from "./ui_template_button";
import "./ui_template_toolbar.css";

export type ToolbarSize = 24 | 28 | 32;
export type ToolbarItem = HTMLElement | "divider" | "spacer";

export interface ToolbarOptions {
  items: ToolbarItem[];
  size?: ToolbarSize;
  /** 그림 위에 뜨는 유리 꼴 */
  glass?: boolean;
  /** 보조기기 이름 */
  label?: string;
}

const SIZED = ".ui-btn, .ui-icon-btn, .ui-input, .ui-select";

export function createToolbar(opts: ToolbarOptions): HTMLElement {
  const size = opts.size ?? 28;
  const bar = document.createElement("div");
  bar.className = `ui-toolbar${opts.glass ? " ui-toolbar--glass" : ""}`;
  bar.setAttribute("role", "toolbar");
  if (opts.label) bar.setAttribute("aria-label", opts.label);
  bar.dataset.size = String(size);
  for (const item of opts.items) {
    if (typeof item === "string") {
      const gap = document.createElement("span");
      gap.className = `ui-toolbar__${item}`;
      if (item === "divider") gap.setAttribute("role", "separator");
      bar.append(gap);
      continue;
    }
    if (!item.dataset.size && item.matches(SIZED)) setUiSize(item, size);
    bar.append(item);
  }
  return bar;
}