/* =============================================================================
 * ui_template_calc_row.ts
 * 부품 「계산 줄」(557-2) — 계산서 한 줄: 이름 · 값 칸(입력 또는 계산 결과) · 덧칸(식 · 안내 · 둘째 값).
 *   꼴   = 값 줄(`createCalcRow` · 이름 | 값 112 | 덧칸) · 식 줄(`createCalcFormulaRow` · 이름 | 식 | 값 112)
 *          · 식 글(`createCalcFormula` · `^…^` 위첨자 · `_…_` 아래첨자) · 이름 칸 안 고르기(`ui-calc-row__label--select`)
 *          · 칸 조각 클래스 = 입력 `ui-calc-row__in` · 고르기 `__select`(값 칸 + 덧칸) · 결과 글 `__out`(숫자 오른쪽 · 중요 `is-key` 굵게) · 글 값 `__value` · 안내 `__hint`
 *   크기 = 줄 최소 30(작은 입력) · 값 칸 112 · 사이 8 · 이름 14 · 식 · 안내 12
 *   상태 = 기본만(입력 · 고르기 부품이 저마다 상태를 가짐 · 판정 색은 화면이 `is-key` 에 줌)
 *   쓰는 법 = `createCalcRow("f : 유출계수", input)` · `createCalcFormulaRow("유속 (m/s)", createCalcFormula("V = 1/n × R^2/3^"), out)`
 *   대신하는 옛 변종 = B08 수리집수면적표 `b08-hydro__row(--f)` · `__label` · `__formula` · `__out` · `__value` · `__in` · `__hint` · `__select`
 * ========================================================================== */

import "./ui_template_calc_row.css";

function span(className: string, text = ""): HTMLElement {
  const el = document.createElement("span");
  el.className = className;
  el.textContent = text;
  return el;
}

/** 식 글 — `^…^` 사이는 위첨자 · `_…_` 사이는 아래첨자 · className 을 주면 이름 칸 등으로 씀 */
export function createCalcFormula(text: string, className = "ui-calc-formula"): HTMLElement {
  const box = document.createElement("div");
  box.className = className;
  for (const part of text.split(/(\^[^^]+\^|_[^_]+_)/)) {
    const tag =
      part.startsWith("^") && part.endsWith("^")
        ? "sup"
        : part.startsWith("_") && part.endsWith("_")
          ? "sub"
          : "";
    if (tag) {
      const el = document.createElement(tag);
      el.textContent = part.slice(1, -1);
      box.append(el);
    } else if (part) box.append(part);
  }
  return box;
}

/** 값 줄 — 이름 · 값 칸(입력 또는 계산) · 덧칸 */
export function createCalcRow(
  label: string | HTMLElement,
  value: HTMLElement,
  extra?: HTMLElement,
): HTMLElement {
  const row = document.createElement("div");
  row.className = "ui-calc-row";
  row.append(typeof label === "string" ? span("ui-calc-row__label", label) : label, value);
  if (extra) row.append(extra);
  return row;
}

/** 식 줄 — 이름 · 식(없으면 빈 칸) · 값 칸 */
export function createCalcFormulaRow(
  label: string,
  middle: HTMLElement | null,
  value: HTMLElement,
): HTMLElement {
  const row = document.createElement("div");
  row.className = "ui-calc-row ui-calc-row--formula";
  row.append(span("ui-calc-row__label", label), middle ?? document.createElement("span"), value);
  return row;
}