/* =============================================================================
 * ui_template_kv.ts
 * 부품 「값 목록」(552-3 · 목록 29) — 「이름 : 값」 줄 여럿(dl).
 *   꼴   = 보통 줄 · 판정 줄(`ok: true` = ✓ · `false` = ✗ — 색만으로 안 가름) · 큰 값 줄(`big`)
 *          · 규칙 꼴(`createKv(rows, { rule: true })` · 557-2) = 왼쪽 15em 칸(키 칩 등 요소) · 오른쪽 설명 글 왼쪽 맞춤 · 값 없는 줄(`value` 안 줌)은 이름이 줄 통째
 *   크기 = 줄 24 · 글 12(이름) / 14(값) · 큰 값 18
 *   상태 = 기본만
 *   쓰는 법 = `createKv([{ label: "연장", value: "1,080 m" }, { label: "종단 경사", value: "12 %", ok: true }])`
 *   대신하는 옛 변종 = B04 `b04-surface__line` · B07 `.b07-info__row` · CAD `.cad-properties dl` · E04 `e04-result__list` · E07 `e07-summary` · ☰ 설정 `app-settings__rules`
 * ========================================================================== */

import { el } from "./ui_template_elements_base";
import "./ui_template_kv.css";

export interface KvRow {
  label: string | Node;
  /** 없으면 「-」 · 규칙 꼴에서 안 주면 이름이 줄 통째 */
  value?: string | number | Node | null;
  /** 판정 — true ✓ · false ✗ */
  ok?: boolean;
  big?: boolean;
}

export function createKv(rows: KvRow[], opts: { rule?: boolean } = {}): HTMLDListElement {
  const list = el("dl", { className: `ui-kv${opts.rule ? " ui-kv--rule" : ""}` });
  for (const row of rows) {
    const label = el("dt", { className: "ui-kv__label" });
    label.append(row.label);
    if (opts.rule && row.value === undefined) {
      list.append(el("div", { className: "ui-kv__row", children: [label] }));
      continue;
    }
    const value = el("dd", { className: "ui-kv__value" });
    const v = row.value;
    value.append(
      v instanceof Node ? v : v === null || v === undefined || v === "" ? "-" : String(v),
    );
    if (row.ok !== undefined) {
      value.prepend(
        el("span", {
          className: `ui-kv__mark ${row.ok ? "is-ok" : "is-bad"}`,
          text: row.ok ? "✓" : "✗",
        }),
      );
    }
    list.append(
      el("div", {
        className: `ui-kv__row${row.big ? " ui-kv__row--big" : ""}`,
        children: [label, value],
      }),
    );
  }
  return list;
}