import { useSyncExternalStore } from 'react'
import type { ECharts } from 'echarts'
import {
  getEchartInstance,
  subscribeEchartInstance,
} from './widget-store-registry'

const SSR_SNAPSHOT = (): ECharts | null => null

/**
 * Reactive read of the live ECharts instance for a widget. Returns
 * `null` before the `Widget.Echart` bridge has mounted (or after it's
 * disposed); the consumer re-renders when the instance arrives /
 * departs / changes.
 *
 * Wraps {@link subscribeEchartInstance} via `useSyncExternalStore`, so
 * actions can use it inside an effect's deps array to react to chart
 * lifecycle events without polling. Required for actions like
 * `BrushToggle` whose effect needs to dispatch `takeGlobalCursor` the
 * moment the chart exists, then re-dispatch on every `'finished'`
 * event.
 */
export function useEchartInstance(id: string): ECharts | null {
  return useSyncExternalStore(
    (cb) => subscribeEchartInstance(id, cb),
    () => getEchartInstance(id),
    SSR_SNAPSHOT,
  )
}