import { useLayoutEffect, useRef } from 'react';

/**
 * 신호등+하단 %/문구(.vtd-sig-light-rail) 높이를 측정해
 * 이퀄라이저 pane 눈금·막대 높이 CSS 변수와 동기화
 */
export function useSignalVisualRailHeight(
  deps: unknown[] = [],
  railHeightVar = '--vtd-sig-rail-height',
) {
  const visualRef = useRef<HTMLDivElement>(null);
  const lightRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const visual = visualRef.current;
    const light = lightRef.current;
    if (!visual || !light) return;

    const sync = () => {
      const h = Math.ceil(light.getBoundingClientRect().height);
      if (h > 0) {
        visual.style.setProperty(railHeightVar, `${h}px`);
      }
    };

    sync();
    const ro = new ResizeObserver(sync);
    ro.observe(light);
    window.addEventListener('resize', sync);
    return () => {
      ro.disconnect();
      window.removeEventListener('resize', sync);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  return { visualRef, lightRef };
}