/* =============================================================================
 * ui_template_flow_legend.ts
 * 부품 「범례」(552-3 · 목록 32) — 그림 · 그래프 색이 무엇인지 한 줄씩.
 *   꼴   = 색 칩(14 × 10 · 기본) · 선(`line`) · 점선(`dash`) · 점(`dot`) · 가로 줄(기본) / 세로 목록(`vertical`)
 *          색 띠 눈금(지도 유입 강도)은 지금 B04 `createFlowLegend`(`.ui-flow-legend` · 이 파일 CSS)가 맡음
 *   크기 = 글 12 · 칩 14 × 10
 *   상태 = 기본 · 꺼짐(`off` → .is-off · 흐림 · 줄 그음) · `onToggle` 을 주면 항목이 단추(aria-pressed)
 *   색   = 부르는 쪽이 CSS 값 글로 줌(`var(--color-chart-1)` · 그림 색이면 `var(--draw-…)`) — 범례 자신은 색을 안 정함
 *   쓰는 법 = `createLegend([{ label: "설계선", color: "var(--draw-profile-design)", kind: "line" }])`
 *   대신하는 옛 변종 = B05 `b05-routeedit__legend` · `b05-routerec__legend` · B06 `b06-design__seg-legend` · `b06-std__legend` · E03 · E04 · E06 · E07 `__legend` · M02 `m02-dfdg__legend` · `.ui-chart__legend`
 * ========================================================================== */

import { el } from "./ui_template_elements_base";
import "./ui_template_flow_legend.css";

export interface LegendItem {
  label: string;
  /** CSS 색 값 글 */
  color: string;
  kind?: "chip" | "line" | "dash" | "dot";
  off?: boolean;
}

export function createLegend(
  items: LegendItem[],
  opts: { vertical?: boolean; onToggle?: (index: number, on: boolean) => void } = {},
): HTMLElement {
  const root = el("div", { className: `ui-legend${opts.vertical ? " ui-legend--vertical" : ""}` });
  items.forEach((item, i) => {
    const mark = el("i", { className: `ui-legend__mark ui-legend__mark--${item.kind ?? "chip"}` });
    mark.style.setProperty("--legend-color", item.color);
    const row = el(opts.onToggle ? "button" : "span", {
      className: `ui-legend__item${item.off ? " is-off" : ""}`,
      children: [mark, item.label],
    });
    if (opts.onToggle && row instanceof HTMLButtonElement) {
      const toggle = opts.onToggle;
      row.type = "button";
      row.setAttribute("aria-pressed", String(!item.off));
      row.addEventListener("click", () => {
        const on = row.classList.toggle("is-off") === false;
        row.setAttribute("aria-pressed", String(on));
        toggle(i, on);
      });
    }
    root.append(row);
  });
  return root;
}