/* =============================================================================
 * M02_MasterTemplete_Hopyo_Compare.ts
 * 불러오기 M01 요소 후보 단추(PLAN 746-2 · 요구 585 · 서버 746-1 `후보`) —
 *  · `elemChoices` = 안 이은 줄의 M01 요소 후보 셋 단추(누르면 부르는 쪽이 이음)
 *  · 옛 고름 대기 기초 줄 비교(`compareView`)는 778-5 D-5 줄 고름으로 걷음
 * 보이기만 — 판정 · 순위는 서버 그대로 · 고르기는 부르는 쪽.
 * ========================================================================== */

import { createButton, el } from "@ui/ui_template_elements";
import { t as L } from "@ui/ui_template_locale";
import { formatPrice } from "../common_util/common_util_money";
import type { ElemCand } from "./M02_MasterTemplete_Hopyo_Api";

/** 요소 후보 단추 줄(셋까지) — 누르면 `pick(후보)` */
export function elemChoices(cands: ElemCand[], pick: (c: ElemCand) => void): HTMLElement | null {
  if (!cands.length) return null;
  const box = el("div", { className: "ui-toolbar", attrs: { "data-elem": "" } });
  box.title = L("M02_ElemTitle");
  for (const c of cands.slice(0, 3)) {
    const price = c.단가 ? ` · ${formatPrice(c.단가)}` : "";
    const b = createButton({
      label: `${c.이름}${c.규격 ? ` ${c.규격}` : ""} [${c.단위 ?? ""}]${price}`,
      size: 24,
      variant: "ghost",
      onClick: () => pick(c),
    });
    b.dataset.elemKey = c.키;
    b.title = `${c.키} · ${c.갈래}`;
    box.append(b);
  }
  return box;
}