/* =============================================================================
 * ui_template_palette.ts
 * 캔버스(2D 지도)용 색 조회 — 색 값의 정의처는 `ui_template_theme.css` 하나뿐이다.
 *
 * CSS로 칠할 수 없는 `<canvas>` 그림도 색은 테마 변수에서 읽어야 화면마다 값이
 * 갈라지지 않는다. `getComputedStyle`은 호출할 때마다 스타일 재계산을 유발하므로
 * 한 번 읽은 값은 캐시하고, 테마가 바뀔 때(`data-theme` 변경)만 비운다.
 * ========================================================================== */

const cache = new Map<string, string>();
let watching = false;

/** 테마가 바뀌면 캐시를 버린다 — 다음 렌더에서 새 값으로 다시 읽는다. */
function watchThemeChange(): void {
  if (watching || typeof MutationObserver === "undefined") return;
  watching = true;
  new MutationObserver(() => cache.clear()).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["data-theme"],
  });
}

/**
 * 테마 CSS 변수 하나를 읽는다.
 *
 * @param name 변수 이름(`--map-route` 처럼 두 하이픈까지 포함)
 * @param fallback 스타일이 아직 붙기 전(초기 렌더)이나 변수가 없을 때 쓸 값
 */
export function themeColor(name: string, fallback: string): string {
  const cached = cache.get(name);
  if (cached !== undefined) return cached;
  watchThemeChange();
  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  const resolved = value || fallback;
  // 값이 비어 있으면(스타일 미적용) 캐시하지 않는다 — 다음 렌더에서 다시 읽게 둔다.
  if (value) cache.set(name, resolved);
  return resolved;
}