import { ref, watch, Ref } from 'vue'
import ResizeObserver from 'resize-observer-polyfill'

export interface UseResizeObserver {
  width: number
  height: number
  top: number
  left: number
  element?: Element
}

export default function (elementRef: Ref<Element | null>) {
  const state: Ref<UseResizeObserver> = ref({
    width: NaN,
    height: NaN,
    top: NaN,
    left: NaN,
    element: undefined,
  })

  const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
      const { left, top, width, height } = entry.contentRect

      state.value = { width, height, top, left, element: entry.target }
    }
  })

  watch(elementRef, (element) => {
    if (element) ro.observe(element)
  })

  return state
}