/* =============================================================================
 * M01_MasterData_UI_LogicLab_View.ts
 * 「단가산출 로직」 상세 보기 고르기 — 머리줄 [신규 로직] 왼쪽 「분할 고르기 | 세로 나눔선」
 *   보기 넷 = 단가산출 상세(기본) · 인력·재료·경비 · 시험 계산 · 텍스트 수식 — 고른 덩이만 보임
 *   덩이 = `data-block` 이름표 · 숨김 = 그릇 `data-view` + CSS(`LogicLab_Style.css`) — 다시 그려도 고름 유지
 *   시험 계산은 숨겨도 그려 둠(자동 계산이 숨은 칸에서도 돎) · 기본정보는 이름표 없음(늘 맨 위)
 *   기억 = 이 화면 안에서만(로직을 바꿔도 유지 · 새로 들어오면 단가산출 상세)
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";
import { createSegment } from "@ui/ui_template_segment";
import { createToolbar } from "@ui/ui_template_toolbar";
import { tl } from "./M01_MasterData_UI_LogicLab_Text";

export type LabView = "ho" | "est" | "calc" | "formula";

/** 덩이에 보기 이름표를 붙여 돌려줌 */
export const block = <T extends HTMLElement>(node: T, view: LabView): T => {
  node.dataset.block = view;
  return node;
};

/** 보기 고르기 — `host`(상세 그릇)에 `data-view` 를 둠 · `root` 는 머리줄에 놓음 */
export function createViewPicker(host: HTMLElement): { root: HTMLElement } {
  host.dataset.view = "ho";
  const segment = createSegment({
    options: [
      { value: "ho", label: tl("Ho_Title") },
      { value: "est", label: tl("View_Est") },
      { value: "calc", label: tl("Calc_Title") },
      { value: "formula", label: tl("Formula_Title") },
    ],
    value: "ho",
    size: 32,
    ariaLabel: tl("View_Label"),
    onChange: (v) => (host.dataset.view = v),
  });
  return { root: createToolbar({ items: [segment.root, "divider"], label: tl("View_Label") }) };
}

/** 상세 머리 「지금 입력」 한 줄(읽기만) — 숨은 시험 계산 칸에 든 값 */
export function nowInputs(values: Record<string, string>): HTMLElement {
  const filled = Object.entries(values).filter(([, v]) => String(v ?? "").trim() !== "");
  const text = filled.length ? filled.map(([k, v]) => `${k} ${v}`).join(" · ") : tl("Now_None");
  return el("p", {
    className: "ui-text ui-text--muted m01lab__now",
    attrs: { "data-now": "" },
    text: `${tl("Now_Inputs")} · ${text}`,
  });
}