/* =============================================================================
 * M02_SO_Def_Spec.ts
 * 구조물 명세가 있는 종류(PLAN 52 · `STRUCTURE_SPECS`)의 이름 고치기 칸(52-11) — 나무 꼴
 * 컨테이너 제목 › 항목 이름 › 값 이름 · 이름만 고침 · 키 · 필수/선택 · 꼴은 읽기만 ·
 * 아래 미리보기 = B05 · B06 이 그리는 같은 명세 폼(`createSpecForm`)에 고친 이름을 얹음.
 * 구조물군 · 종류 이름은 왼쪽 목록 · 머리 칸이 그대로 고침.
 * ========================================================================== */

import { createTag, el } from "@ui/ui_template_elements";
import { createSpecForm } from "../../A00_Common/design/design_structure_form";
import type { StructureSpec } from "../../A00_Common/design/design_structure_spec";
import type { StructDef, TypeDef } from "./M02_SO_Def_Model";
import { setSpecName, specNameRows, type SpecNameRow } from "./M02_SO_Def_Spec_Model";
import { head, textBox } from "./M02_SO_Def_Ui";
import { to, type OptionsTextKey } from "./M02_SO_Text";

const TAG: Record<NonNullable<SpecNameRow["tag"]>, OptionsTextKey> = {
  required: "SpecRequired",
  optional: "SpecOptional",
  select: "FormSelect",
  number: "FormNumber",
  auto: "FormAuto",
};

export function buildSpecBlock(opt: {
  def: StructDef;
  type: TypeDef;
  spec: StructureSpec;
  edit: boolean;
  changed: () => void;
}): HTMLElement {
  const { def, type, spec, edit, changed } = opt;
  const rows = specNameRows(def, spec).map((row) =>
    el("div", {
      className: `m02-sod__specrow is-level-${row.level}`,
      attrs: { "data-sod-spec": row.nameKey },
      children: [
        textBox(row.label, (v) => setSpecName(def, type.type_id, row, v), changed, {
          edit,
          attr: "data-sod-spec-name",
          cls: "m02-sod__name",
        }),
        el("small", { className: "m02-opts__key", text: row.key }),
        ...(row.tag ? [createTag(to(TAG[row.tag]), "neutral")] : []),
      ],
    }),
  );
  // 미리보기 — 값 없는 새 구조물 폼 · 잇기 줄 없음(조합은 프로젝트 몫)
  const preview = createSpecForm(null);
  const groups = Object.fromEntries((def.그룹[type.type_id] ?? []).map((g) => [g.id, g.이름]));
  preview.write(spec, {}, def.종류[type.type_id]?.이름 ?? {}, groups);
  preview.root.inert = true;
  return el("div", {
    className: "m02-sod__block",
    attrs: { "data-sod-spec-block": "" },
    children: [
      ...head(to("SpecHead"), to("SpecNote")),
      ...rows,
      ...head(to("SpecPreview")),
      el("div", {
        className: "m02-sod__specpreview",
        attrs: { "data-sod-spec-preview": "" },
        children: [preview.root],
      }),
    ],
  });
}