<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import {
  getComponentContainer,
  getComponentGroupAry,
  getComponentGroup,
  hasComponentGroup,
} 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')
})
const arrowsData = computed(() => {
  return getComponentGroupAry(props.components, 'arrow')
})
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})
</script>

<template>
  <section class="section-standard">
    <WidgetsSlideFade
      v-if="slideData"
      v-model:index="currentSlideIndex"
      :arrows="slideData.length > 1"
      :pagination="slideData.length > 1"
      :pagination-data="paginationData"
      :arrows-data="arrowsData"
      class="h-full"
    >
      <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 gap-3 md:gap-5">
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'subTitle')"
            :resources-data="getComponentGroup(item, 'subTitle')"
            class="title-md max-w-[944px]"
          />
          <WidgetsMainTitle
            v-if="hasComponentGroup(item, 'mainTitle')"
            :resources-data="getComponentGroup(item, 'mainTitle')"
            class="title-xlg max-w-[944px]"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(item, 'description')"
            :resources-data="getComponentGroup(item, 'description')"
            class="max-w-[944px]"
          />
          <WidgetsButtonList
            v-if="hasComponentGroup(item, 'buttonList')"
            :resources-data="getComponentGroupAry(item, 'buttonList')"
            class="mt-[28px] md:mt-[52px]"
          />
        </div>
      </SplideSlide>
    </WidgetsSlideFade>
  </section>
</template>
