/* =============================================================================
 * ui_template_checkbox.ts
 * 부품 「체크 · 라디오」(552-2 · 부품 모음 `#/b01-account?view=ui-kit`) — [□ 글] 한 줄 · 줄 세우기는 부르는 쪽 몫.
 *
 *   꼴   = 체크 · 라디오(radio + name) · 칩(chip — 켜면 채움 · 테두리 알약)
 *   크기 = 상자 14 · 칩은 data-size(기본 24)
 *   상태 = 마우스 `:hover` · 막힘 `disabled` — CSS 는 `[data-state]` 로도 받음
 *   쓰기 = `const box = createCheckbox("등고선", { checked: true, value: "contour" }); panel.append(box.root);`
 *          읽기 = box.input.checked · box.input.value · 라디오 = `createCheckbox("밝음", { radio: "theme", value: "light" })`
 *   대신 = 날 체크(시트 · B01 · A07 · D03 · D04 · E03 `e03-check` · M02 …) · `.app-settings__radios` · `m02-lib__pick` · `b05-route__check`
 *   클래스 = `ui-checkbox` · `ui-checkbox__input` · `ui-checkbox__text` — 시험 · 가이드 촬영이 잡음
 * ========================================================================== */

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

export interface Checkbox {
  root: HTMLLabelElement;
  input: HTMLInputElement;
}

export interface CheckboxOptions {
  checked?: boolean;
  value?: string;
  /** 라디오 묶음 이름 — 주면 라디오 */
  radio?: string;
  /** 칩 꼴(켜면 채움) */
  chip?: boolean;
  /** 칩 크기 단(기본 24) */
  size?: UiSize;
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
}

export function createCheckbox(text: string, options: CheckboxOptions = {}): Checkbox {
  const root = document.createElement("label");
  root.className = `ui-checkbox${options.radio ? " ui-checkbox--radio" : ""}${options.chip ? " ui-checkbox--chip" : ""}`;
  if (options.chip) setUiSize(root, options.size ?? 24);
  const input = document.createElement("input");
  input.type = options.radio ? "radio" : "checkbox";
  if (options.radio) input.name = options.radio;
  input.className = "ui-checkbox__input";
  input.checked = options.checked ?? false;
  input.disabled = options.disabled ?? false;
  if (options.value !== undefined) input.value = options.value;
  if (options.onChange) input.addEventListener("change", () => options.onChange!(input.checked));
  const caption = document.createElement("span");
  caption.className = "ui-checkbox__text";
  caption.textContent = text;
  root.append(input, caption);
  return { root, input };
}