import type { Splide as SplideType } from '@splidejs/splide'

/**
 * Splide 슬라이더의 화살표 클릭 로직을 처리하는 composable
 */
export const useSplideArrow = () => {
  /**
   * 화살표 클릭 시 슬라이드 인덱스를 계산하는 함수
   * @param direction - 이동 방향 ('prev' | 'next')
   * @param splide - Splide 인스턴스
   * @returns 다음 슬라이드 인덱스
   */
  const calculateTargetIndex = (direction: 'prev' | 'next', splide: SplideType): number => {
    const currentIndex = splide.index
    const totalSlides = splide.length
    
    if (direction === 'next') {
      return currentIndex + 1 >= totalSlides ? 0 : currentIndex + 1
    } else {
      return currentIndex - 1 < 0 ? totalSlides - 1 : currentIndex - 1
    }
  }

  /**
   * 화살표 클릭 핸들러
   * @param direction - 이동 방향
   * @param splide - Splide 인스턴스
   * @param onArrowClick - 화살표 클릭 시 실행될 콜백 함수
   */
  const handleArrowClick = (
    direction: 'prev' | 'next', 
    splide: SplideType, 
    onArrowClick?: (direction: 'prev' | 'next', targetIndex: number) => void
  ) => {
    const targetIndex = calculateTargetIndex(direction, splide)
    
    if (onArrowClick) {
      onArrowClick(direction, targetIndex)
    }
  }

  /**
   * 화살표 버튼에 클릭 이벤트 리스너를 추가하는 함수
   * @param splide - Splide 인스턴스
   * @param onArrowClick - 화살표 클릭 시 실행될 콜백 함수
   */
  const addArrowClickListeners = (
    splide: SplideType, 
    onArrowClick?: (direction: 'prev' | 'next', targetIndex: number) => void
  ) => {
    const prevArrow = splide.root.querySelector('.arrow-prev')
    const nextArrow = splide.root.querySelector('.arrow-next')
    
    if (prevArrow) {
      prevArrow.addEventListener('click', () => handleArrowClick('prev', splide, onArrowClick))
    }
    
    if (nextArrow) {
      nextArrow.addEventListener('click', () => handleArrowClick('next', splide, onArrowClick))
    }
  }

  return {
    calculateTargetIndex,
    handleArrowClick,
    addArrowClickListeners
  }
}