/* =============================================================================
 * M01_MasterData_UI_LogicLab_Side.ts
 * 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 「원문」(품셈 본문 절)
 * 공용 오른쪽 접는 패널(ui_template_side_panels) — 접힘 됨 · 접힌 패널 = 세로 글 띠
 * 열림 · 폭은 취향 키(`m01-logic-side`) · 원문 = 공용 원문 보기(`LogicLab_Source`)
 * 맨 위 「단가산출 기초 찾기」(807-1 · `LogicLab_SourceFind`) — 고르면 그 기초 원문 · 지우면 연 로직 원문
 * ========================================================================== */

import { currentLanguageIndex } from "@ui/ui_template_locale";
import { createSidePanels } from "@ui/ui_template_side_panels";
import { el } from "@ui/ui_template_elements";
import { createSourceView } from "./M01_MasterData_UI_LogicLab_Source";
import { createSourceFind } from "./M01_MasterData_UI_LogicLab_SourceFind";
import "./M01_MasterData_UI_LogicLab_Side.css";

const TEXT = {
  Source: ["원문", "Source"],
} as const;

const ts = (key: keyof typeof TEXT): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];

export interface LogicSide {
  /** [왼쪽 지금 내용, 오른쪽 패널] 칸 */
  root: HTMLElement;
  /** 연 로직의 출처 글 — 원문 패널이 열려 있으면 찾음 */
  showSource(src: string): void;
}

export function buildLogicSide(left: HTMLElement): LogicSide {
  const source = createSourceView();
  let want = "";
  let found: string | null = null; // 찾기로 고른 기초 출처(지우면 연 로직으로)
  /** 원문 패널이 열려 있을 때만 찾음 */
  const load = (): void => {
    if (sp.current() === "source") source.show(found ?? want);
  };
  const find = createSourceFind({
    onPick: (x) => {
      found = x.출처 ?? "";
      load();
    },
    onClear: () => {
      found = null;
      load();
    },
  });
  const sp = createSidePanels({
    prefKey: "m01-logic-side",
    defaultWidth: 520,
    minWidth: 320,
    panels: [
      {
        id: "source",
        title: ts("Source"),
        body: el("div", { className: "m01lab-src", children: [find.root, source.root] }),
      },
    ],
    onChange: load,
  });
  return {
    root: el("div", { className: "m01lab-side ui-side-panels-row", children: [left, sp.root] }),
    showSource: (src) => {
      if (src !== want) {
        find.clear();
        found = null;
      }
      want = src;
      load();
    },
  };
}