/* =============================================================================
 * B07_DesignDetail_UI_Development.ts
 * 좌측 「전개도」 카드(요구 241 · PLAN 377) — 늘 카드 · 구조물 종류마다 하위 묶음(이름 줄 + 형태 단추).
 *
 * 묶음 = `groupPlanSheets`(plan_kind = 구조물 종류 · plan_kind_name = 이름) 재사용 · 모양 = 평면도 묶음 class.
 * 단추 글 = 장 이름에서 종류 이름 · 「전개도」를 뺀 형태(전체 이름은 툴팁).
 * ========================================================================== */

import { createPanelCard } from "@ui/ui_template_collapsible";
import type { DesignDrawingItem } from "./B07_DesignDetail_Api_Fetch";
import { groupPlanSheets } from "./B07_DesignDetail_UI_PlanKinds";

/** 「관보호공 돌쌓기(찰) 전개도 (2)」 → 「돌쌓기(찰) (2)」 · 포장 「콘크리트포장 전개도」 → 「콘크리트포장」. */
function shortLabel(label: string, kindName: string): string {
  const rest = label.replace(" 전개도", "");
  return rest.startsWith(`${kindName} `) ? rest.slice(kindName.length + 1) : rest;
}

export function buildDevelopmentSection(
  items: DesignDrawingItem[],
  makeButton: (drawing: DesignDrawingItem, label: string) => HTMLButtonElement,
  collapsed = true,
): HTMLElement {
  const section = createPanelCard(`전개도 ${items.length}`, collapsed);
  section.classList.add("b07-drawing-group");
  section.dataset.kind = "development";
  if (items.length === 0) {
    const empty = document.createElement("span");
    empty.className = "b07-plan-kind__name";
    empty.textContent = "종단 길이를 가진 구조물이 없습니다.";
    section.append(empty);
    return section;
  }
  for (const { kindId, name, sheets } of groupPlanSheets(items)) {
    const block = document.createElement("div");
    block.className = "b07-plan-kind";
    block.dataset.planKind = kindId;
    const title = document.createElement("span");
    title.className = "b07-plan-kind__name";
    title.textContent = name;
    block.append(title);
    for (const { drawing } of sheets) {
      const button = makeButton(drawing, shortLabel(drawing.label, name));
      button.title = drawing.label;
      block.append(button);
    }
    section.append(block);
  }
  return section;
}