/* =============================================================================
 * M01_MasterData_UI_LogicLab_Pill.ts
 * 알약 단추 — 수량 칸 안 조각(표 찾기 등)을 누르면 곧장 그 자료 모달을 엶.
 * (이전에는 알약을 늘어놓고 아래 자리에서 펼쳤으나, 알약이 수량 칸 안으로 들어가며
 *  「누르면 모달」 로 바뀜 — 모달 안에 알약 목록을 또 두지 않음.)
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";

export interface Pill {
  /** 알약 글 — 보기 「표 QF000421」 */
  label: string;
  /** 누르면 할 일 — 그 자료 모달을 엶 */
  onClick: () => void;
}

/** 알약 하나 — 글자 조각 사이에 끼워 쓰는 단추 */
export function pillButton(p: Pill): HTMLButtonElement {
  const b = el("button", {
    className: "m01lab__pill",
    text: p.label,
    attrs: { type: "button", "data-pill": p.label },
  });
  b.addEventListener("click", (ev) => {
    ev.stopPropagation(); // 줄 전체 누르기(행 모달)와 안 겹치게
    p.onClick();
  });
  return b;
}

/** 수량 칸 조각 — 알약 아니면 그냥 글자(연산기호·숫자·중간값 이름) */
export type Fragment = { pill: Pill } | { text: string };

/** 조각을 이어 그림 — 칸 폭을 넘으면 자동으로 줄바꿈(`flex-wrap`) */
export function fragmentRow(fragments: Fragment[]): HTMLElement {
  return el("span", {
    className: "m01lab__qty-frags",
    children: fragments.map((f) =>
      "pill" in f
        ? pillButton(f.pill)
        : el("span", { className: "m01lab__qty-text", text: f.text }),
    ),
  });
}