/* =============================================================================
 * ui_template_tree.ts
 * 공용 나무 보기 — 부모(접기/펴기) · 자식(깊이 들임) · 잎 고름. M01 왼쪽 패널과 항목 고르기가 함께 씀.
 * 줄 모양은 부르는 쪽이 `MakeRow` 로 정함(기본 줄 = `createTreeRow`).
 * ========================================================================== */

import "./ui_template_tree.css";
import { el } from "./ui_template_elements";

export interface TreeNode {
  id: string;
  label: string;
  /** 줄 수 — null 이면 안 보임 */
  count: number | null;
  /** 눌렀을 때 — 없으면 접기/펴기만 */
  run?: () => void;
  children?: TreeNode[];
  /** 처음부터 펴짐 */
  open?: boolean;
  /** 마우스를 올렸을 때 글(기본 줄) */
  tip?: string;
}

/** 줄(버튼) 만들기 — 돌려받은 것 = 그 버튼 · click 은 부르는 쪽이 이음 */
export type MakeRow = (
  node: TreeNode,
  caret: string,
  depth: number,
  onClick: () => void,
) => HTMLElement;

export function renderTree(nodes: TreeNode[], make: MakeRow, depth = 0): HTMLElement[] {
  return nodes.map((node) => {
    if (!node.children?.length) return make(node, "", depth, () => node.run?.());
    const kids = el("div", {
      className: "ui-tree__kids",
      children: renderTree(node.children, make, depth + 1),
    });
    kids.hidden = !node.open;
    const row = make(node, kids.hidden ? "▸" : "▾", depth, () => {
      kids.hidden = !kids.hidden;
      const caret = row.querySelector(".ui-tree__caret");
      if (caret) caret.textContent = kids.hidden ? "▸" : "▾";
      node.run?.();
    });
    return el("div", { className: "ui-tree__branch", children: [row, kids] });
  });
}

/** 기본 줄 — 화살표 · 글 · 줄 수 · 깊이 들임. 잎 고름 표시(`is-active`)는 부르는 쪽이 켬. */
export function createTreeRow(
  node: TreeNode,
  caret: string,
  depth: number,
  onClick: () => void,
): HTMLButtonElement {
  const button = el("button", {
    className: "ui-tree__row ui-sidebar-row",
    attrs: { type: "button" },
    children: [
      el("span", {
        children: [
          el("span", { className: "ui-tree__caret", text: caret }),
          el("span", { text: node.label }),
        ],
      }),
      ...(node.count === null
        ? []
        : [el("span", { className: "ui-tree__count", text: node.count.toLocaleString("ko-KR") })]),
    ],
  });
  button.style.paddingLeft = `calc(var(--spacing-8) + ${depth} * var(--spacing-16))`;
  if (node.tip) button.title = node.tip;
  button.addEventListener("click", onClick);
  return button;
}