/* =============================================================================
 * M02_MasterTemplete_Hopyo_Side.ts
 * 좌측 「일위대가 불러오기」 컨테이너(PLAN 324-4 · 718-1 한시) — [불러오기](구조물 조합 층 단추 꼴 `m02-layers__btn`) →
 * 본 칸 마법사(`M02_MasterTemplete_Hopyo_Wizard` · 결과 층 고름 · 작업 중 이어서 · [끝내기] 때 올린 파일 지움) ·
 * 옛 파일 목록 없음(옛 HP 는 서버 목록에서 숨김) ·
 * 아래 [별칭 장부](338-3) → 본 칸 장부 화면(`M02_MasterTemplete_Hopyo_Ledger` · 층 = 구조물 조합 층).
 * ========================================================================== */

import { createButton, el } from "@ui/ui_template_elements";
import { t as L } from "@ui/ui_template_locale";
import { pageScope } from "./M02_MasterTemplete_Hopyo_Api";
import { buildHopyoLedger, LEDGER_HINT, LEDGER_TITLE } from "./M02_MasterTemplete_Hopyo_Ledger";
import { buildHopyoWizard } from "./M02_MasterTemplete_Hopyo_Wizard";

export interface HopyoSectionOptions {
  /** 이 층 쓰기 권한 — 별칭 장부 고침 */
  canWrite: boolean;
  /** 저장 안 한 고침을 버릴지 확인 — 취소면 false */
  confirmLeave: () => Promise<boolean>;
  /** 메인 칸에 화면을 띄움 */
  show: (label: string, node: HTMLElement) => (dirty: boolean) => void;
  /** 화면을 열었음 — 좌측 다른 고름 표시를 지움 */
  onOpen: () => void;
}

export interface HopyoSection {
  title: string;
  body: HTMLElement;
  /** 다른 화면이 열렸으면 고름 표시를 지움 */
  paint: () => void;
}

const WIZARD = "불러오기";

export function buildHopyoSection(opt: HopyoSectionOptions): HopyoSection {
  const title = L("M02_HopyoImport");
  const scope = pageScope();
  const start = createButton({
    label: "불러오기",
    variant: "filled",
    onClick: () => void showView(WIZARD),
  });
  start.classList.add("m02-layers__btn");
  start.title = "다른 프로그램 일위대가 엑셀 → 우리 일위대가(한시 · 끝내면 올린 파일 지움)";
  start.dataset.hopyoWizardOpen = "";
  const ledger = el("button", {
    className: "m02-side__item ui-sidebar-row",
    text: LEDGER_TITLE,
    attrs: { type: "button", title: LEDGER_HINT, "data-hopyo-ledger-open": "" },
  });
  ledger.addEventListener("click", () => void showView(LEDGER_TITLE));
  const body = el("div", {
    className: "m02-hopyo-side",
    children: [el("div", { className: "m02-side__row", children: [start] }), ledger],
  });
  let open: { key: string; view: HTMLElement } | null = null;

  const paintList = (): void => {
    ledger.classList.toggle("is-active", open?.key === LEDGER_TITLE);
  };

  async function showView(key: string): Promise<void> {
    if (open?.key === key && open.view.isConnected) return;
    if (!(await opt.confirmLeave())) return;
    const view =
      key === WIZARD ? buildHopyoWizard() : buildHopyoLedger({ scope, canWrite: opt.canWrite });
    opt.show(key === WIZARD ? title : `${title} — ${LEDGER_TITLE}`, view);
    opt.onOpen();
    open = { key, view };
    paintList();
  }

  const paint = (): void => {
    if (open && !open.view.isConnected) {
      open = null;
      paintList();
    }
  };

  return { title, body, paint };
}