/* =============================================================================
 * M02_MasterTemplete_Sangeun_View.ts
 * 단가산출(SK) 상세 자리(717-2a) — 편집 칸 종류 sangeun 이 여는 곳(UI_Main 갈래 한 줄).
 * 717-2b = 상세 · 고침(`Sangeun_Detail.ts` mountSangeunDetail) · [저장]은 그 손잡이 `getDoc` · 고침 알림 `opt.onChanged`.
 * 804-8 = 페이지 [저장] 한 번에 수식도(`flush` 먼저 · 새 판) · 보기 고르기는 머리 줄 `slot`.
 * 810-4 = 원문 패널 판정 띠 [바꾸기] · [되돌리기] · [연결 찾기] 뒤 그 SK 를 다시 읽어 상세를 다시 엶(새 판).
 * ========================================================================== */

import { readTemplate } from "./M02_MasterTemplete_Api_Fetch";
import { mountSangeunDetail } from "./M02_MasterTemplete_Sangeun_Detail";
import type { Selection } from "./M02_MasterTemplete_UI_Main";

/** 고름(층 · 주인 · SK 키 = name) + 읽기만 · 고침 알림 */
export type SangeunViewOptions = Pick<Selection, "layer" | "owner" | "name"> & {
  readOnly: boolean;
  onChanged: (dirty: boolean) => void;
  /** 수식 탭 저장 뒤 그 SK 새 판(802-4b-2) */
  onVersion?: (version: string) => void;
  /** 머리 줄 빈 자리(804-8) */
  slot?: HTMLElement;
};

export function mountSangeunView(
  host: HTMLElement,
  doc: unknown,
  opt: SangeunViewOptions,
): { getDoc: () => Promise<unknown>; destroy: () => void } {
  let dirty = false;
  const onChanged = (d: boolean): void => ((dirty = d), opt.onChanged(d));
  /** 판정 띠 단추(810-4) — 서버가 SK 를 고친 뒤 새 판 · 그 SK 를 다시 읽어 상세를 다시 엶 */
  const match = {
    layer: opt.layer,
    owner: opt.owner ?? null,
    key: opt.name,
    readOnly: opt.readOnly,
    dirty: () => dirty,
    done: (version: string): void => {
      opt.onVersion?.(version);
      void readTemplate(opt.layer, "sangeun", opt.name, null, opt.owner ?? null).then((got) => {
        if (!alive) return;
        one.destroy();
        one = mount(got.문서);
        onChanged(false);
      });
    },
  };
  const mount = (d: unknown) =>
    mountSangeunDetail(host, d, {
      ...opt,
      onChanged,
      owner: opt.owner ?? null,
      source: true,
      match,
    }); // 752-1
  let alive = true;
  let one = mount(doc);
  return {
    getDoc: () => one.flush().then(() => one.getDoc()),
    destroy: () => ((alive = false), one.destroy()),
  };
}