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

const useWheelScrollWhileHovering = () => {
  const scrollRef = useRef<HTMLElement>(null)
  const [hovering, setHovering] = useState(false)

  useEffect(() => {
    const wheelHandler = (ev: WheelEvent) => {
      const scrollContainer = scrollRef.current
      if (scrollContainer) {
        const currentScroll = scrollContainer.scrollLeft
        const scrollTarget = currentScroll + ev.deltaX
        if (hovering) {
          scrollContainer?.scroll?.({ left: scrollTarget })
        }
      }
    }

    if (window) {
      window.addEventListener('wheel', wheelHandler)
    }

    return () => window?.removeEventListener('wheel', wheelHandler)
  }, [hovering])

  useEffect(() => {
    const scrollContainer = scrollRef?.current
    const onMouseEnter = () => setHovering(true)
    const onMouseLEave = () => setHovering(false)
    if (scrollContainer) {
      scrollContainer.addEventListener('mouseover', onMouseEnter)
      scrollContainer.addEventListener('mouseleave', onMouseLEave)
    }

    return () => {
      scrollContainer?.removeEventListener('mouseover', onMouseEnter)
      scrollContainer?.removeEventListener('mouseleave', onMouseLEave)
    }
  }, [])

  return scrollRef
}

export default useWheelScrollWhileHovering