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

export const useSidebarResize = (initialWidth: number = 250) => {
  const [sidebarWidth, setSidebarWidth] = useState(initialWidth)
  const [isResizing, setIsResizing] = useState(false)
  const sidebarLeft = useRef(0)

  const startResizing = useCallback((e: React.MouseEvent) => {
    e.preventDefault()
    const sidebar = (e.target as HTMLElement).closest('.sidebar-container') as HTMLElement
    if (sidebar) {
      const rect = sidebar.getBoundingClientRect()
      sidebarLeft.current = rect.left
      setIsResizing(true)
    }
  }, [])

  useEffect(() => {
    if (!isResizing) return

    const stopResizing = () => setIsResizing(false)
    const resize = (e: MouseEvent) => {
      const newWidth = e.clientX - sidebarLeft.current
      if (newWidth > 150 && newWidth < 600) {
        setSidebarWidth(newWidth)
      }
    }

    window.addEventListener('mousemove', resize)
    window.addEventListener('mouseup', stopResizing)
    return () => {
      window.removeEventListener('mousemove', resize)
      window.removeEventListener('mouseup', stopResizing)
    }
  }, [isResizing])

  return { sidebarWidth, startResizing, isResizing }
}