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

/**
 * 监听容器宽度变化的hook
 */
export function useContainerWidth() {
  const [width, setWidth] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)
  const rafRef = useRef<number | undefined>(undefined)

  const updateWidth = useCallback(() => {
    // 使用 requestAnimationFrame 来防止频繁更新
    if (rafRef.current) {
      cancelAnimationFrame(rafRef.current)
    }

    rafRef.current = requestAnimationFrame(() => {
      if (containerRef.current) {
        const newWidth = containerRef.current.offsetWidth
        // 只有当宽度真正变化时才更新状态
        setWidth((prevWidth) => {
          if (Math.abs(prevWidth - newWidth) > 1) {
            // 允许1px的误差
            return newWidth
          }
          return prevWidth
        })
      }
    })
  }, [])

  useEffect(() => {
    // 初始化宽度
    updateWidth()

    // 监听窗口大小变化
    window.addEventListener('resize', updateWidth)

    // 使用 ResizeObserver 监听容器大小变化（如果支持）
    let resizeObserver: ResizeObserver | null = null
    if (window.ResizeObserver && containerRef.current) {
      resizeObserver = new ResizeObserver(updateWidth)
      resizeObserver.observe(containerRef.current)
    }

    return () => {
      window.removeEventListener('resize', updateWidth)
      if (resizeObserver) {
        resizeObserver.disconnect()
      }
      if (rafRef.current) {
        cancelAnimationFrame(rafRef.current)
      }
    }
  }, [updateWidth])

  return { width, containerRef }
}
