/* =============================================================================
 * ui_template_toggle.ts
 * 부품 「켜기」(552-2 · 부품 모음 `#/b01-account?view=ui-kit`)
 *
 *   꼴   = 스위치(switch · [글 ○━] 한 줄) · 켜기 칩(chip · 색 점 붙음 · 지도 층 · 보기 켜고 끄기)
 *   크기 = data-size 20 · 24 · 28 · 32(기본 24)
 *   상태 = 마우스 `:hover` · 눌림 `:active` · 막힘 `disabled` · 켬 = aria-checked / aria-pressed — CSS 는 `[data-state]` 로도 받음
 *   쓰기 = `createToggle({ label: "등고선", checked: true, onChange })`
 *          `createToggle({ kind: "chip", label: "유역", dot: "var(--map-basin-1)" })`
 *   대신 = B03 `b03-file__lasfree` · B04 `b04-map__layer-button` · `.toggle-button` · B05 `b05-drainage__layer-button` ·
 *          `toggleButton()` · B06 `b06-structure-panel__toggle` · `.ui-prov-toggle` · 시트 `.is-on` 단추 · CAD 상태막대 켜기
 * ========================================================================== */

import { setUiSize, type UiSize } from "./ui_template_button";
import "./ui_template_toggle.css";

export interface ToggleOptions {
  label: string;
  /** switch(기본) · chip */
  kind?: "switch" | "chip";
  checked?: boolean;
  /** 칩 앞 색 점 — CSS 색 값(그림 색은 `var(--map-*)` · `var(--draw-*)`) */
  dot?: string;
  /** 20 · 24 · 28 · 32 권함 */
  size?: UiSize;
  disabled?: boolean;
  onChange?: (on: boolean) => void;
}

export interface ToggleHandle {
  root: HTMLButtonElement;
  /** 지금 값 */
  get: () => boolean;
  /** 값을 바꿈(onChange 는 안 부름) */
  set: (on: boolean) => void;
}

export function createToggle(opts: ToggleOptions): ToggleHandle {
  const chip = opts.kind === "chip";
  const root = document.createElement("button");
  root.type = "button";
  root.className = chip ? "ui-toggle ui-toggle--chip" : "ui-toggle";
  setUiSize(root, opts.size ?? 24);
  if (!chip) root.setAttribute("role", "switch");
  const attr = chip ? "aria-pressed" : "aria-checked";
  if (chip && opts.dot) {
    const dot = document.createElement("span");
    dot.className = "ui-toggle__dot";
    dot.style.background = opts.dot;
    root.append(dot);
  }
  const text = document.createElement("span");
  text.className = "ui-toggle__text";
  text.textContent = opts.label;
  root.append(text);
  if (!chip) {
    const track = document.createElement("span");
    track.className = "ui-toggle__track";
    root.append(track);
  }
  const set = (on: boolean): void => root.setAttribute(attr, String(on));
  const get = (): boolean => root.getAttribute(attr) === "true";
  set(opts.checked ?? false);
  root.disabled = opts.disabled ?? false;
  root.addEventListener("click", () => {
    set(!get());
    opts.onChange?.(get());
  });
  return { root, get, set };
}