import {
  type Ref, onMounted, onUnmounted, nextTick, watchEffect,
} from 'vue'

interface UseScrollPaginationInterface {
  callback: () => void
  trigger: Ref<HTMLElement>
  root?: Ref<HTMLElement>
}

export default function useScrollPagination(options: UseScrollPaginationInterface) {
  const params: { threshold: number, root?: HTMLElement } = { threshold: 0 }

  if (options.root) params.root = options.root.value

  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      options.callback()
    }
  }, params)

  onMounted(() => {
    watchEffect(() => {
      nextTick(() => {
        if (options.trigger.value) {
          observer.observe(options.trigger.value)
        }
      })
    })
  })

  onUnmounted(() => {
    observer.disconnect()
  })
}