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

interface Props {
  slideItemSize: SlideItemSize
  type?: 'loop' | 'slide'
  autoplay?: boolean | string
  arrows?: boolean
  pagination?: boolean
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'loop',
  autoplay: false,
  arrows: true,
  pagination: true,
})

const options = computed((): ResponsiveOptions => {
  return {
    type: props.type,
    focus: 'center',
    autoWidth: true,
    autoHeight: true,
    speed: 400,
    updateOnMove: true,
    arrows: props.arrows,
    pagination: props.pagination,
    autoplay: props.autoplay,
    classes: {
      arrows: 'splide-arrows',
      arrow: 'splide-arrow',
      prev: 'arrow-prev',
      next: 'arrow-next',
      pagination: 'splide-pagination-bullets',
      page: 'splide-pagination-bullet',
    },
  }
})

const style = computed(() => {
  if (!props.slideItemSize) return {}

  const { mo, pc } = props.slideItemSize
  const scaleFactor = 1.1429

  return {
    // 모바일 기본값
    '--banner-width-mo': `${mo.width}px`,
    '--banner-height-mo': `${mo.height}px`,
    '--banner-gap-mo': `${mo.gap}px`,
    // 모바일 확대값
    '--banner-width-mo-active': `${mo.width * scaleFactor}px`,
    '--banner-height-mo-active': `${mo.height * scaleFactor}px`,
    '--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,

    // PC 기본값
    '--banner-width-pc': `${pc.width}px`,
    '--banner-height-pc': `${pc.height}px`,
    '--banner-gap-pc': `${pc.gap}px`,
    // PC 확대값
    '--banner-width-pc-active': `${pc.width * scaleFactor}px`,
    '--banner-height-pc-active': `${pc.height * scaleFactor}px`,
    '--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
    // PC arrow값
    '--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
  }
})

const handleSplideMounted = (splide: SplideType) => {
  splide.refresh()
}
</script>

<template>
  <div :class="`center-highlight ${props.class || ''}`" :style="style">
    <Splide :options="options" @splide:mounted="handleSplideMounted">
      <slot />
    </Splide>
  </div>
</template>

<style scoped>
.center-highlight {
  @apply w-full;
}
.center-highlight:deep(.splide__slide) {
  @apply flex items-center justify-center;
  width: var(--banner-width-mo);
  height: var(--banner-height-mo-active);
  margin-right: var(--banner-gap-mo);
}
.center-highlight:deep(.splide__slide.is-active) {
  width: var(--banner-width-mo-container);
}

/* PC 스타일 */
@media (min-width: 1024px) {
  .center-highlight:deep(.splide__slide) {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc-active);
    margin-right: var(--banner-gap-pc);
  }
  .center-highlight:deep(.splide__slide.is-active) {
    width: var(--banner-width-pc-container);
  }
  .center-highlight:deep(.splide-arrow) {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .center-highlight:deep(.arrow-prev) {
    margin-left: calc(-1 * var(--banner-arrow-pc));
  }
  .center-highlight:deep(.arrow-next) {
    margin-left: var(--banner-arrow-pc);
  }
}
</style>
