/* =============================================================================
 * M01_MasterData_UI_LogicLab_View.ts
 * 「단가산출 로직」 상세 보기 고르기 — 머리줄 [신규 로직] 왼쪽 「분할 고르기 | 세로 나눔선」
 *   보기 둘 = 수식(기본 · 줄 쌓기 화면 `A00_Common/line_stack_screen.ts` · 804-6 옛 수식 문서 탭 걷음) · 단가산출 상세 — 고른 덩이만 보임
 *   덩이 = `data-block` 이름표 · 숨김 = 그릇 `data-view` + CSS(`LogicLab_Style.css`) — 다시 그려도 고름 유지
 *   셈 구동은 화면 칸 없이 `_Logic_Drive.ts` · 기본정보는 이름표 없음(늘 맨 위)
 *   기억 = 이 화면 안에서만(로직을 바꿔도 유지 · 새로 들어오면 수식)
 * ========================================================================== */

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 = "stack" | "ho";

/** 덩이에 보기 이름표를 붙여 돌려줌 */
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,
  onChange?: (v: LabView) => void,
): { root: HTMLElement } {
  host.dataset.view = "stack";
  const segment = createSegment({
    options: [
      { value: "stack", label: tl("View_Equation") },
      { value: "ho", label: tl("Ho_Title") },
    ],
    value: "stack",
    size: 32,
    ariaLabel: tl("View_Label"),
    onChange: (v) => {
      host.dataset.view = v;
      onChange?.(v as LabView);
    },
  });
  return { root: createToolbar({ items: [segment.root, "divider"], label: tl("View_Label") }) };
}