/* =============================================================================
 * M02_MasterTemplete_AreaDrawing.ts
 * 면적산출 상세 오른쪽 「도면」 패널 몸(PLAN 47-6) — 그 열 구조물 도면을 보기만(확대 · 이동).
 * 그리기는 구조물 조합 도면 카드 미리보기와 같은 길(`DrawingCard.mountDrawingView`).
 * 처음 펼 때 읽고 그림 — 접힌 채 iframe 을 띄우지 않음.
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";
import { readTemplate, type Layer, type StructureDoc } from "./M02_MasterTemplete_Api_Fetch";
import { mountDrawingView } from "./M02_MasterTemplete_DrawingCard";

const TEXT = {
  loading: "도면 불러오는 중…",
  none: "이 열은 구조물 도면이 없음",
};

export interface AreaDrawing {
  root: HTMLElement;
  /** 패널이 펼쳐짐 — 처음 한 번만 읽고 그림 */
  show: () => void;
  destroy: () => void;
}

export function createAreaDrawing(layer: Layer, column: string): AreaDrawing {
  const root = el("div", { className: "m02-apanel__drawing" });
  let view: { destroy: () => void } | null = null;
  let started = false;
  let dead = false;
  const note = (text: string): void =>
    root.replaceChildren(el("p", { className: "m02-apanel__note", text }));

  const show = (): void => {
    if (started) return;
    started = true;
    note(TEXT.loading);
    readTemplate(layer, "structure", column, null)
      .then((got) => {
        if (dead) return;
        const doc = got.문서 as StructureDoc | null;
        if (!doc?.도면) return note(TEXT.none);
        root.replaceChildren();
        view = mountDrawingView(root, doc, { layer, projectId: null }, column);
      })
      .catch(() => !dead && note(TEXT.none));
  };

  return {
    root,
    show,
    destroy: () => {
      dead = true;
      view?.destroy();
      root.remove();
    },
  };
}