'use client';

import { useEffect, useRef } from 'react';
import echarts, { type EChartsOption } from './echarts';

/** Mounts an ECharts instance on a div, keeps it sized with ResizeObserver, applies `option` when it changes. */
export function useEChart(option: EChartsOption | null, deps: unknown[] = []) {
  const ref = useRef<HTMLDivElement>(null);
  const chartRef = useRef<echarts.ECharts | null>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const chart = echarts.init(el, undefined, { renderer: 'canvas' });
    chartRef.current = chart;
    const ro = new ResizeObserver(() => chart.resize());
    ro.observe(el);
    return () => {
      ro.disconnect();
      chart.dispose();
      chartRef.current = null;
    };
  }, []);

  useEffect(() => {
    if (option && chartRef.current) chartRef.current.setOption(option, { notMerge: true, lazyUpdate: true });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [option, ...deps]);

  return { ref, chartRef };
}