/* =============================================================================
 * ui_template_kv.ts
 * 부품 「값 목록」(552-3 · 목록 29) — 「이름 : 값」 줄 여럿(dl).
 *   꼴   = 보통 줄 · 판정 줄(`ok: true` = ✓ · `false` = ✗ — 색만으로 안 가름) · 큰 값 줄(`big`)
 *   크기 = 줄 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` · B08 `b08-hydro__row`
 * ========================================================================== */

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

export interface KvRow {
  label: string;
  /** 없으면 「-」 */
  value: string | number | Node | null | undefined;
  /** 판정 — true ✓ · false ✗ */
  ok?: boolean;
  big?: boolean;
}

export function createKv(rows: KvRow[]): HTMLDListElement {
  const list = el("dl", { className: "ui-kv" });
  for (const row of rows) {
    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: [el("dt", { className: "ui-kv__label", text: row.label }), value],
      }),
    );
  }
  return list;
}