import { ref, onMounted, onBeforeUnmount } from 'vue'

interface ScrollAnimOptions {
  delay?: number
  class?: string
  threshold?: number
}

export function useScrollAnim(options: ScrollAnimOptions = {}) {
  const { delay = 0, threshold = 0.15 } = options
  const isVisible = ref(false)
  let observer: IntersectionObserver | null = null

  function observe(el: Element, overrides: ScrollAnimOptions = {}) {
    const d = overrides.delay ?? delay
    const cls = overrides.class ?? 'flow-visible'
    observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setTimeout(() => {
              entry.target.classList.add(cls)
            }, d)
            observer?.unobserve(entry.target)
          }
        })
      },
      { threshold }
    )
    observer.observe(el)
  }

  function unobserveAll() {
    observer?.disconnect()
  }

  onBeforeUnmount(() => unobserveAll())

  return { isVisible, observe, unobserve: unobserveAll }
}