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

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
  pageVerTmplNameEn: string
}

const props = defineProps<Props>()

const currentSlideIndex = ref<number | null>(null)

const slideData = computed(() => {
  return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
})
const thumbnailData = computed(() => {
  return slideData.value
    .map(item => item?.pagenaviThumbnail?.groups?.[0])
    .filter((group): group is NonNullable<typeof group> => group != null)
})
const arrowsData = computed(() => {
  return getComponentGroupAry(props.components, 'arrow')
})
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})
</script>

<template>
  <section class="section-standard">
    <WidgetsSlideThumbnail
      v-model:index="currentSlideIndex"
      :thumbnail-data="thumbnailData"
      :pagination-data="paginationData"
      :arrows-data="arrowsData"
      :analytics-sarea="props.pageVerTmplNameEn"
    >
      <SplideSlide v-for="(item, index) in slideData" :key="index">
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'background')"
          :resources-data="getComponentGroup(item, 'background')"
          :video-play="currentSlideIndex === index"
        />
        <div class="content-standard">
          <WidgetsMainTitle
            v-if="hasComponentGroup(item, 'mainTitle')"
            :resources-data="getComponentGroup(item, 'mainTitle')"
            class="title-lg max-w-[944px]"
          />
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'subTitle')"
            :resources-data="getComponentGroup(item, 'subTitle')"
            class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(item, 'description')"
            :resources-data="getComponentGroup(item, 'description')"
            class="max-w-[944px] mt-4 md:mt-6"
          />
        </div>
      </SplideSlide>
    </WidgetsSlideThumbnail>
  </section>
</template>
