<script setup lang="ts">
import { Splide } from '@splidejs/vue-splide'
import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
import type { PageDataResourceGroups } from '#layers/types/api/pageData'

interface Props {
  type?: ResponsiveOptions['type']
  slideItemLength?: number
  autoplay?: boolean
  perPage?: number
  drag?: boolean
  arrows?: boolean
  pagination?: boolean
  paginationData?: PageDataResourceGroups
  breakpoints?: ResponsiveOptions['breakpoints']
}

const props = withDefaults(defineProps<Props>(), {
  autoplay: false,
  perPage: 1,
  drag: true,
  arrows: true,
  pagination: true,
})

const emit = defineEmits(['mounted', 'move', 'arrowClick'])

// Splide 화살표 로직을 위한 composable 사용
const { addArrowClickListeners } = useSplideArrow()

const slideType = computed(() => {
  if (props.type) return props.type

  return (props.slideItemLength ?? 0) > 1 ? 'loop' : 'slide'
})

const options = computed((): ResponsiveOptions => {
  return {
    type: slideType.value,
    autoWidth: true,
    autoHeight: true,
    perPage: props.perPage,
    speed: 500,
    updateOnMove: true,
    autoplay: props.autoplay,
    drag: props.drag,
    trimSpace: false,
    arrows: props.arrows,
    pagination: props.pagination,
    classes: {
      arrows: 'splide-arrows',
      arrow: 'splide-arrow',
      prev: 'arrow-prev',
      next: 'arrow-next',
      pagination: 'splide-pagination-bullets',
      page: 'splide-pagination-bullet',
    },
    ...(props.breakpoints ? { breakpoints: props.breakpoints } : {}),
  }
})

const handleSplideMounted = (splide: SplideType) => {
  emit('mounted', splide)

  // 화살표 버튼 클릭 이벤트 리스너 추가
  nextTick(() => {
    addArrowClickListeners(splide, (direction, targetIndex) => {
      emit('arrowClick', direction, targetIndex)
    })
  })
}

const handleMove = (
  splide: SplideType,
  newIndex: number,
  oldIndex: number,
  destIndex: number
) => {
  emit('move', splide, newIndex, oldIndex, destIndex)
}
</script>

<template>
  <Splide
    :options="options"
    class="w-full"
    :style="getPaginationClass(props?.paginationData)"
    @splide:mounted="handleSplideMounted"
    @splide:move="handleMove"
  >
    <slot />
  </Splide>
</template>
