import { useEffect, useState, type RefObject } from 'react'

export const DEFAULT_LAZY_INTERSECTION_DELAY_MS = 180
const DEFAULT_INTERSECTION_OBSERVER_INIT: IntersectionObserverInit = { threshold: 0 }

interface UseDelayedIntersectionOptions {
  delayMs?: number
  observerInit?: IntersectionObserverInit
}

export function useDelayedIntersection<T extends Element>(
  ref: RefObject<T | null>,
  {
    delayMs = DEFAULT_LAZY_INTERSECTION_DELAY_MS,
    observerInit = DEFAULT_INTERSECTION_OBSERVER_INIT,
  }: UseDelayedIntersectionOptions = {},
): boolean {
  const [intersected, setIntersected] = useState(false)

  useEffect(() => {
    if (intersected) return

    const element = ref.current
    if (!element) return

    if (typeof IntersectionObserver === 'undefined') {
      setIntersected(true)
      return
    }

    let timer: ReturnType<typeof setTimeout> | undefined
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        timer ??= setTimeout(() => {
          setIntersected(true)
          observer.disconnect()
        }, delayMs)
        return
      }

      if (timer) {
        clearTimeout(timer)
        timer = undefined
      }
    }, observerInit)

    observer.observe(element)

    return () => {
      if (timer) clearTimeout(timer)
      observer.disconnect()
    }
  }, [delayMs, intersected, observerInit, ref])

  return intersected
}