import { useCallback, useEffect, useRef, useState } from 'react'

/**
 * 监听容器宽度，宽时展开操作按钮，窄时收入 Dropdown。
 * @param threshold 折叠阈值（px），默认 700
 * @returns [collapsed, callbackRef]
 */
export function useCollapsedActions(threshold = 700) {
  const [collapsed, setCollapsed] = useState(false)
  const observerRef = useRef<ResizeObserver | null>(null)
  const elementRef = useRef<HTMLElement | null>(null)

  const ref = useCallback(
    (el: HTMLElement | null) => {
      observerRef.current?.disconnect()
      observerRef.current = null
      elementRef.current = el

      if (!el || typeof ResizeObserver === 'undefined') return

      const observer = new ResizeObserver(([entry]) => {
        setCollapsed(entry.contentRect.width < threshold)
      })
      observer.observe(el)
      observerRef.current = observer
    },
    [threshold],
  )

  useEffect(() => {
    return () => {
      observerRef.current?.disconnect()
      observerRef.current = null
      elementRef.current = null
    }
  }, [])

  return [collapsed, ref] as const
}