/* =============================================================================
 * M02_SO_Options.ts
 * 좌측 「구조물 옵션 정의」 줄(구조물 집계 양식 아래 별도 · 시스템 층) — 누르면 메인 칸에
 * 정의 편집 화면(PLAN 48-2 · `M02_SO_Def.ts`) · 고쳐 씀은 시스템 관리자만 · 다른 역할은 읽기만.
 * 옛 「보이기 · 그룹」 화면(46장)은 정의 화면의 옵션 줄 「보이기」 · 그룹 칸으로 들어감.
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";
import { openDefScreen } from "./M02_SO_Def";
import "./M02_SO_Style.css";
import { to } from "./M02_SO_Text";

export interface OptionsSectionOptions {
  isAdmin: boolean;
  /** 저장 안 한 고침을 버릴지 확인 — 취소면 false */
  confirmLeave: () => Promise<boolean>;
  /** 메인 칸에 화면을 띄움 — 고침 표시 손잡이를 돌려받음 */
  show: (label: string, node: HTMLElement) => (dirty: boolean) => void;
  /** 화면을 열었음 — 좌측 다른 고름 표시를 지움 */
  onOpen: () => void;
}

export interface OptionsSection {
  title: string;
  body: HTMLElement;
  /** 다른 화면을 열었음 — 고름 표시만 지움 */
  clear: () => void;
}

export function buildOptionsSection(opt: OptionsSectionOptions): OptionsSection {
  const row = el("button", {
    className: "m02-side__item ui-sidebar-row",
    text: to("Row"),
    attrs: { type: "button", "data-options-row": "" },
  });
  const body = el("div", { className: "m02-side__items ui-sidebar-list", children: [row] });

  /** 이 화면이 열려 있는 동안 참 — 다른 것이 열리면 `clear` 가 내림 */
  let opened = false;
  const mark = (on: boolean): void => {
    opened = on;
    row.classList.toggle("is-active", on);
  };
  row.addEventListener("click", async () => {
    if (opened || !(await opt.confirmLeave())) return;
    if (!(await openDefScreen({ isAdmin: opt.isAdmin, show: opt.show }))) return;
    opt.onOpen();
    mark(true);
  });

  return { title: to("Title"), body, clear: () => mark(false) };
}