import type { DirectiveCallback } from 'alpinejs'

import { $slider, hasSlider } from './SliderCTX'

type DirectiveParams = Parameters<DirectiveCallback>
export const SliderPart = (
  part: 'gallery' | 'thumbnails',
  el: DirectiveParams[0],
  directive: DirectiveParams[1],
  { Alpine, cleanup }: DirectiveParams[2],
) => {
  const ctx = Alpine.$data(el)
  if (!hasSlider(ctx)) {
    console.error(
      `Element with ${directive.original} needs to be inside an x-slider element`,
      el,
    )
    return
  }
  const slider = ctx[$slider]
  slider.components.set(part, el)

  if (part === 'gallery') {
    // Keep the start/end edge flags in sync with the real scroll position so
    // the prev/next controls enable and disable accurately.
    const controller = new AbortController()
    el.addEventListener('scroll', slider.updateEdges.bind(slider), {
      passive: true,
      signal: controller.signal,
    })
    cleanup(() => controller.abort())
    slider.updateEdges()
  }
}