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

export const useResizeObserver = (handleResize: (element: Element) => void) => {
  const resizeRef = useRef<{
    element: Element
    observer: ResizeObserver
  } | null>(null)

  const elementRef = useCallback(
    (element: Element | null) => {
      if (element && 'ResizeObserver' in window) {
        if (resizeRef.current) {
          resizeRef.current.observer.unobserve(resizeRef.current.element)
        }

        const observer = new ResizeObserver(([entry]) => {
          handleResize(entry.target)
        })

        resizeRef.current = { element, observer }

        observer.observe(element)

        handleResize(element) // trigger the callback once
      }
    },
    [handleResize]
  )

  useEffect(() => {
    return () => {
      if (resizeRef.current) {
        resizeRef.current.observer.unobserve(resizeRef.current.element)
      }
    }
  }, [])

  return { elementRef, resizeRef }
}