<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import {
  getComponentContainer,
  getComponentGroupAry,
  getComponentGroup,
  hasComponentGroup,
} from '#layers/utils/dataUtil'
import type { Splide as SplideType } from '@splidejs/splide'
import type {
  PageDataTemplateComponents,
  PageDataTemplateComponent,
} from '#layers/types/api/pageData'

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const { getCurrentSrc } = useResponsiveSrc()

const currentSlideIndex = ref<number>(0)

const slideData = computed(() => {
  return getComponentContainer(props.components, 'group_sets', {
    maxLength: 10,
  })
})
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})

const videoSrc = (item: PageDataTemplateComponent) => {
  const src = getComponentGroup(item, 'video')?.res_path
  return getCurrentSrc(src, { resourcesType: 'video' })
}

const handleSplideMove = (_splide: SplideType, newIndex: number) => {
  currentSlideIndex.value = newIndex
}
</script>

<template>
  <section class="section-standard">
    <BlocksSlideThumbnail
      :slide-data="slideData"
      :pagination-data="paginationData"
      @move="handleSplideMove"
    >
      <SplideSlide v-for="(item, index) in slideData" :key="index">
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'background')"
          :resources-data="getComponentGroup(item, 'background')"
        />
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'foreground')"
          :resources-data="getComponentGroup(item, 'foreground')"
        />
        <div
          class="content-standard max-w-[1024px] mx-auto items-start pt-[48px] md:pt-0"
        >
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'category')"
            :resources-data="getComponentGroup(item, 'category')"
            class="title-xs mb-2 line-clamp-1 text-left md:mb-5"
          />
          <WidgetsMainTitle
            v-if="hasComponentGroup(item, 'mainTitle')"
            :resources-data="getComponentGroup(item, 'mainTitle')"
            class="title-lg line-clamp-1 text-left"
          />
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'subTitle')"
            :resources-data="getComponentGroup(item, 'subTitle')"
            tag="p"
            class="title-md mt-1 line-clamp-1 text-left"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(item, 'description')"
            :resources-data="getComponentGroup(item, 'description')"
            class="mt-2 text-left md:mt-5"
          />
          <AtomsVideo
            v-if="hasComponentGroup(item, 'video')"
            :src="videoSrc(item)"
            :play="currentSlideIndex === index"
            autoplay
            muted
            loop
            playsinline
            class="aspect-[16/10] w-[258px] mt-8 md:w-[496px] md:mt-10"
          />
        </div>
      </SplideSlide>
    </BlocksSlideThumbnail>
  </section>
</template>
