/* =============================================================================
 * B05_Profile_UI_Structures_Summary_Row.ts
 * 구조물 폼의 「집계 항목」 줄 — 이름(없으면 「미지정」) · [고르기] · [해제] (PLAN 21-4).
 *
 * B05 · B06 · 관 계열 하위 폼이 같은 줄을 쓴다(옵션 · 서브폼 아래 한 줄). 줄은 값만 들고 있고
 * 저장은 패널이 한다 — [고르기]가 모달(21-5 `openItemPicker`)을 부르고 돌려받은 참조를 `set` 한다.
 * 키(SS…)는 앞에 내세우지 않고 툴팁에만 둔다(PLAN 21-0).
 * ========================================================================== */

import {
  summaryLabel,
  summaryTooltip,
  type SummaryItem,
} from "../common_util/common_util_summary_item";

export interface SummaryRow {
  root: HTMLElement;
  get: () => SummaryItem | null;
  /** 값만 바꿔 그림 — 저장 · 알림은 안 함(폼 불러오기 · 모달 결과가 씀). */
  set: (item: SummaryItem | null) => void;
  /** [고르기] · [해제] 배선 — 패널이 한 번 부른다. */
  bind: (handlers: { pick: () => void; clear: () => void }) => void;
}

export function buildSummaryRow(): SummaryRow {
  // 옵션 칸과 같은 2행 꼴(54-17) — 위 제목(`b05-route__field > span`) · 아래 [이름 칸][선택][해제]
  const root = document.createElement("div");
  root.className = "b05-route__field b05-structure__summary";
  root.dataset.b05Summary = "row";
  const label = document.createElement("span");
  label.className = "b05-structure__summary-label";
  label.textContent = "구조물 조합";
  // 이름 = 읽기 전용 입력 칸 — 옵션 입력 칸과 글꼴 · 크기 · 칸 모양이 같음
  const name = document.createElement("input");
  name.type = "text";
  name.readOnly = true;
  name.tabIndex = -1;
  name.className = "b05-structure__summary-name";
  const pick = document.createElement("button");
  pick.type = "button";
  pick.className = "b05-route__irregular-btn";
  pick.textContent = "선택";
  pick.dataset.b05Summary = "pick";
  const clear = document.createElement("button");
  clear.type = "button";
  clear.className = "b05-route__irregular-btn";
  clear.textContent = "해제";
  clear.dataset.b05Summary = "clear";
  const line = document.createElement("div");
  line.className = "b05-route__irregular-actions";
  line.append(name, pick, clear);
  root.append(label, line);

  let current: SummaryItem | null = null;
  const set = (item: SummaryItem | null): void => {
    current = item;
    name.value = summaryLabel(item);
    name.title = summaryTooltip(item);
    name.classList.toggle("is-assigned", item !== null);
    clear.disabled = item === null;
  };
  set(null);

  return {
    root,
    get: () => current,
    set,
    bind(handlers) {
      pick.addEventListener("click", () => handlers.pick());
      clear.addEventListener("click", () => handlers.clear());
    },
  };
}