import { useCallback, useEffect } from 'react'
import { useShallow } from 'zustand/react/shallow'
import { SIDEBAR_WIDTH } from '@/stores/constants'
import { useSidebarStore } from '@/stores/sidebar/store'

/**
 * Custom hook to handle sidebar resize functionality.
 * Manages mouse events for resizing and enforces min/max width constraints.
 * Maximum width is capped at 30% of the viewport width for optimal layout.
 *
 * @returns Resize state and handlers
 */
export function useSidebarResize() {
  const { setSidebarWidth, isResizing, setIsResizing } = useSidebarStore(
    useShallow((s) => ({
      setSidebarWidth: s.setSidebarWidth,
      isResizing: s.isResizing,
      setIsResizing: s.setIsResizing,
    }))
  )

  /**
   * Handles mouse down on resize handle
   */
  const handleMouseDown = useCallback(() => {
    setIsResizing(true)
  }, [])

  /**
   * Setup resize event listeners and body styles when resizing
   * Cleanup is handled automatically by the effect's return function
   */
  useEffect(() => {
    if (!isResizing) return

    const handleMouseMove = (e: MouseEvent) => {
      const newWidth = e.clientX
      const maxWidth = window.innerWidth * SIDEBAR_WIDTH.MAX_PERCENTAGE

      if (newWidth >= SIDEBAR_WIDTH.MIN && newWidth <= maxWidth) {
        setSidebarWidth(newWidth)
      }
    }

    const handleMouseUp = () => {
      setIsResizing(false)
    }

    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
    document.body.style.cursor = 'ew-resize'
    document.body.style.userSelect = 'none'

    return () => {
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
      document.body.style.cursor = ''
      document.body.style.userSelect = ''
    }
  }, [isResizing, setSidebarWidth])

  return {
    isResizing,
    handleMouseDown,
  }
}
