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

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

const props = defineProps<Props>()

const { getCurrentSrc } = useResponsiveSrc()

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

const slideData = computed(() => {
  return getComponentContainer(props.components, 'group_sets', {
    maxLength: 10,
  })
})
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')
})

const getVideoSrc = (item: PageDataTemplateComponent) => {
  const videoData = getComponentGroup(item, 'video')
  return getCurrentSrc(videoData)
}
</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"
        />
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'foreground')"
          :resources-data="getComponentGroup(item, 'foreground')"
        />
        <div
          class="content-standard mx-auto items-start pt-[48px] max-w-[375px] sm:max-w-[415px] md:max-w-[1024px] md:pt-0"
        >
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'category')"
            :resources-data="getComponentGroup(item, 'category')"
            class="title-xs max-w-[540px] mb-2 text-left md:mb-5"
          />
          <WidgetsMainTitle
            v-if="hasComponentGroup(item, 'mainTitle')"
            :resources-data="getComponentGroup(item, 'mainTitle')"
            class="title-lg max-w-[540px] text-left"
          />
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'subTitle')"
            :resources-data="getComponentGroup(item, 'subTitle')"
            tag="p"
            class="title-md max-w-[540px] mt-1 text-left"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(item, 'description')"
            :resources-data="getComponentGroup(item, 'description')"
            class="max-w-[540px] mt-2 text-left md:mt-5"
          />
          <AtomsVideo
            v-if="hasComponentGroup(item, 'video')"
            v-motion-stagger
            :src="getVideoSrc(item)"
            :play="currentSlideIndex === index"
            class="aspect-[16/10] w-[258px] mt-8 md:w-[496px] md:mt-10"
          />
        </div>
      </SplideSlide>
    </WidgetsSlideThumbnail>
  </section>
</template>
