import type { Bindings, Magics } from 'alpinejs'

import { $slider, type WithSlider } from '../SliderCTX'

export const nextButton: ThisType<WithSlider & Magics<unknown>> &
  Bindings<Button> = {
  [':disabled']() {
    return this[$slider].isLast
  },
  'x-on:click'() {
    this[$slider].next(this.$el)
  },
}

export const prevButton: ThisType<WithSlider & Magics<unknown>> &
  Bindings<Button> = {
  [':disabled']() {
    return this[$slider].isFirst
  },
  'x-on:click'() {
    this[$slider].prev(this.$el)
  },
}

export const goTo = (idx: number): ThisType<WithSlider> & Bindings<Button> => ({
  [':disabled']() {
    return this[$slider].focusedIndex === idx
  },
  'x-on:click'() {
    this[$slider].scrollTo(idx)
  },
})

export type Button = {
  ':disabled'(): boolean
  'x-on:click'(): void
}