import { RefObject, useCallback, useEffect, useState } from "react"
import { useEventListener } from "usehooks-ts"

export const useIntersected = (
  elementARef: RefObject<HTMLElement | null | undefined>,
  elementBRef: RefObject<HTMLElement | null | undefined>,
  scrollRef?: RefObject<HTMLElement | null | undefined>,
) => {
  const [intersected, setIntersected] = useState(false)

  const evaluateScrollPosition = useCallback(() => {
    if (scrollRef?.current) {
      setIntersected(scrollRef.current.scrollTop > 0)
      return
    }

    if (!elementARef.current || !elementBRef.current) {
      return
    }

    const elementATop = elementARef.current.getBoundingClientRect().top
    const elementBTop = elementBRef.current.getBoundingClientRect().top
    const elementBHeight = elementBRef.current.getBoundingClientRect().height

    const top = elementATop - elementBTop - elementBHeight

    setIntersected(top < 0)
  }, [elementARef, elementBRef, scrollRef])

  useEffect(() => {
    evaluateScrollPosition()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEventListener(
    "scroll",
    evaluateScrollPosition,
    // Typing is safe here, the usehooks-ts library just has bad overloads
    scrollRef as unknown as RefObject<HTMLElement>,
  )

  return intersected
}