import type { Bindings, Magics } from 'alpinejs'

import { $slider, type WithSlider } from '../SliderCTX'
export const pauseOnFocus: ThisType<WithSlider & Magics<PauseFocus>> &
  Bindings<PauseFocus> = {
  'x-on:mouseenter'() {
    this[$slider].pause()
  },
  'x-on:mouseleave'() {
    this[$slider].unpause()
  },
  'x-on:focusin'() {
    this[$slider].pause()
  },
  'x-on:focusout'() {
    this[$slider].unpause()
  },
}

export type PauseFocus = {
  'x-on:mouseenter'(): void
  'x-on:mouseleave'(): void
  'x-on:focusin'(): void
  'x-on:focusout'(): void
}