import { useEffect, useRef } from 'react'

/**
 * Stelt een achtergrondafbeelding uit tot het element in beeld komt.
 *
 * Achtergronden in CSS kennen geen loading="lazy": zodra de regel matcht, gaat
 * het verzoek eruit. Op de landingspagina betekende dat drie afbeeldingen van
 * samen 413 kB bij het openen, terwijl twee ervan pas ver onder de vouw staan.
 *
 * Het element krijgt hier pas het attribuut data-achtergrond="geladen" wanneer
 * het in de buurt van het scherm komt; de CSS hangt de url aan dat attribuut.
 * Zonder IntersectionObserver — of met beperkte beweging — wordt de afbeelding
 * meteen gezet, zodat er nooit een leeg vlak achterblijft.
 */
export function useDeferredBackground<T extends HTMLElement>(): React.RefObject<T> {
  const ref = useRef<T>(null)

  useEffect(() => {
    const element = ref.current
    if (!element) return

    const toon = () => element.setAttribute('data-achtergrond', 'geladen')

    if (typeof IntersectionObserver === 'undefined') {
      toon()
      return
    }

    const waarnemer = new IntersectionObserver(
      (invoeren) => {
        if (invoeren.some((invoer) => invoer.isIntersecting)) {
          toon()
          waarnemer.disconnect()
        }
      },
      // Ruim voor de vouw beginnen, zodat de afbeelding er staat voordat de
      // gebruiker hem bereikt.
      { rootMargin: '600px' },
    )
    waarnemer.observe(element)
    return () => waarnemer.disconnect()
  }, [])

  return ref
}