import { useTemplateRef, watch, onMounted, onBeforeUnmount } from 'vue'
import { isElementInViewport } from '../utils'

export const InfiniteLoader = ({ isLoading, hasMore }: { isLoading: boolean, hasMore: boolean }) => {
  const emit = vineEmits(['load-more'])
  const
    loaderElement = useTemplateRef('loader'),
    loaderObserver = new IntersectionObserver(([ entry ]) => {
      (
        entry?.isIntersecting &&
        !isLoading && hasMore
      ) && emit('load-more')
    })

  onBeforeUnmount(() => loaderObserver.unobserve(loaderElement.value as HTMLElement))
  onMounted(() => {
    loaderObserver.observe(loaderElement.value as HTMLElement)
    emit('load-more')
  })
  watch(
    () => [ isLoading, hasMore ],
    () => {
      (
        isElementInViewport(loaderElement.value as HTMLElement) &&
        !isLoading && hasMore
      ) && emit('load-more')
    },
    { immediate: true }
  )

  return vine`
    <div ref="loader" class="row justify-content-center">
      <span :aria-busy="isLoading" />
    </div>
  `
}