import type { AlpineComponent } from 'alpinejs'

export const $slider = Symbol('$slider')
export const hasSlider = <T extends object>(ctx: T): ctx is WithSlider<T> =>
  $slider in ctx

export type WithSlider<T = object> = T & { [$slider]: SliderCTX }

export interface SliderCTX extends AlpineComponent<object> {
  focusedIndex: number
  focusedSize: number
  initialized: boolean
  touched: boolean
  paused: boolean
  atStart: boolean
  atEnd: boolean
  pause(): this
  unpause(): this
  components: Map<'gallery' | 'thumbnails', HTMLElement>
  autoScrollPercentage: number
  init(): void
  onLoad(target: HTMLElement): void
  handleIntersect(el: HTMLElement, intersecting?: boolean): void
  updateFocusedIndex(): void
  updateEdges(): void
  itemAtIndex(idx: number): Element | undefined
  indexOfItem(el: Element): number | undefined
  scrollTo(
    target: number | HTMLElement,
    offset?: number,
    userInitiated?: boolean,
    instant?: boolean,
  ): Promise<void>
  readonly isLast: boolean
  readonly isFirst: boolean
  next(element: HTMLElement): void
  prev(element: HTMLElement): void
  getStepInfo(el: HTMLElement): number
  itemCount: number
}