import { useEffect, useRef } from 'react'
import { widgetStoreActions } from '../widgets/stores/widget-store'

/**
 * Registers a DOM element ref and an ECharts instance ref with the widget store.
 * This allows other parts of the application (e.g., screenshot export) to access the widget's DOM element.
 *
 * @param widgetId - The widget ID to register the refs under.
 * @returns An object with `ref` (DOM element) and `instance` (ECharts instance) refs.
 *
 * @example
 * ```tsx
 * function MyWidget({ id }: { id: string }) {
 *   const { ref } = useWidgetRef<HTMLDivElement>(id)
 *
 *   return <div ref={ref}>Widget content</div>
 * }
 * ```
 */
export function useWidgetRef<T extends HTMLElement = HTMLElement>(
  widgetId: string,
) {
  const ref = useRef<T | null>(null)
  const instance = useRef<echarts.ECharts | null>(null)

  useEffect(() => {
    if (ref.current) {
      widgetStoreActions.setWidget(widgetId, { refUI: ref, instance: instance })
    }
  }, [widgetId])

  return { ref, instance }
}