import { useSyncExternalStore } from "react";
import { readCssSections, type CssSection } from "./read-css-tokens";

// 스타일시트는 React 바깥의 외부 시스템이라 `useSyncExternalStore`가 맞는 도구다
// (effect에서 setState 하면 렌더가 연쇄된다).
//
// 선언 **원문**을 읽으므로 결과가 현재 테마·뷰포트에 영향받지 않는다 — 한 번 읽어
// 캐시하면 그만이다. `useSyncExternalStore`는 매 렌더마다 getSnapshot을 호출하므로
// 매번 새 배열을 돌려주면 무한 루프가 된다.
let cached: CssSection[] | null = null;

function subscribe(): () => void {
  return () => {};
}

function getSnapshot(): CssSection[] | null {
  cached ??= readCssSections();
  return cached;
}

function getServerSnapshot(): CssSection[] | null {
  return null;
}

/** 서버 렌더와 하이드레이션 첫 렌더에서는 `null`, 그 이후 CSS에서 읽은 섹션 목록. */
export function useCssTokens(): CssSection[] | null {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}