import { RefObject, useMemo, useLayoutEffect, useRef, useState } from 'react'

type DOMRectRef = [rect: DOMRect, ref: RefObject<HTMLDivElement>]

export const useDimensions = ():DOMRectRef => {
  const ref = useRef<HTMLDivElement>(null)

  const [rect, setRect] = useState<DOMRect>(DOMRect.fromRect())

  const resizeObserver = useMemo(() => {
    if ( !ref.current ) return

    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        setRect(entry.contentRect)
      }
    })

    observer.observe(ref.current)

    return observer
  }, [ref.current])

  useLayoutEffect(() => () => {
    if (ref.current) {
      resizeObserver?.unobserve(ref.current)
    }
  }, [resizeObserver, ref.current])

  return [rect, ref]
}