import type { Alpine } from 'alpinejs'
import { goTo, nextButton, prevButton } from './bindings/button'
import { pauseOnFocus } from './bindings/container'
import { dynamicHeight } from './bindings/dynamicHeight'
import { sliderItem, unfocusableHidden } from './bindings/sliderItem'
import { $slider, hasSlider } from './SliderCTX'
import { SliderPart } from './SliderPart'
import { SliderRoot } from './SliderRoot'

export type { SliderCTX } from './SliderCTX'
export const Slider = (Alpine: Alpine) => {
  Alpine.addRootSelector(() => `[${Alpine.prefixed('slider')}]`)
  Alpine.directive('slider', (el, directive, utilities) => {
    if (!directive.value || directive.value === 'root')
      return SliderRoot(el, directive, utilities)
    if (directive.value === 'gallery' || directive.value === 'thumbnails') {
      SliderPart(directive.value, el, directive, utilities)
    }
  })

  Alpine.magic('slider', (el) => {
    const ctx = Alpine.$data(el)
    if (hasSlider(ctx)) return ctx[$slider]
  })

  Alpine.bind('$sliderDynamicHeight', dynamicHeight)
  Alpine.bind('$sliderItem', sliderItem)
  Alpine.bind('$sliderNext', nextButton)
  Alpine.bind('$sliderPrev', prevButton)
  Alpine.bind('$sliderGoTo', goTo)
  Alpine.bind('$sliderPause', pauseOnFocus)
  Alpine.bind('$sliderUnfocusHidden', unfocusableHidden)
}