import type { Bindings, Magics } from 'alpinejs'

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

export const sliderItem: ThisType<
  WithSlider & SlideState & Magics<SliderItem>
> &
  Bindings<SliderItem> = {
  'x-intersect.threshold.60'() {
    this.visible = true
    const slider = this[$slider]
    this.index = slider.indexOfItem(this.$el) ?? 0
    slider.handleIntersect(this.$el)
  },
  'x-intersect:leave.threshold.40'() {
    this.visible = false
    const slider = this[$slider]
    this.index = slider.indexOfItem(this.$el) ?? 0
    slider.handleIntersect(this.$el, false)
  },
  'x-init'() {
    const slider = this[$slider]
    slider.onLoad(this.$el)
  },
  'x-on:load'() {
    const slider = this[$slider]
    slider.onLoad(this.$el)
  },
  'x-data'() {
    return {
      visible: false,
      index: 0,
    }
  },
  ':class'() {
    const slider = this[$slider]
    const idx = this.index
    const current = slider.focusedIndex
    // return '';
    return {
      'slide-item': true,
      'slide-next': idx > current,
      'slide-previous': idx < current,
      'slide-current': idx === current,
      'slide-visible': this.visible,
    }
  },
}

type SlideState = {
  visible: boolean
  index: number
}

export type SliderItem = {
  'x-intersect.threshold.60'(): void
  'x-intersect:leave.threshold.40'(): void
  'x-init'(): void
  'x-data'(): SlideState
  'x-on:load'(): void
  ':class'(): string
}

export const unfocusableHidden: ThisType<WithSlider & Magics<UnfocusHide>> &
  Bindings<UnfocusHide> = {
  'x-intersect:enter.threshold.60'() {
    this.$el.removeAttribute('tabindex')
    this.$el.removeAttribute('inert')
  },
  'x-intersect:leave.threshold.40'() {
    this.$el.setAttribute('tabindex', '-1')
    this.$el.setAttribute('inert', 'inert')
  },
}

export type UnfocusHide = {
  'x-intersect:enter.threshold.60'(): void
  'x-intersect:leave.threshold.40'(): void
}