<script setup lang="ts">
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import {
  hasComponentGroup,
  getComponentGroup,
  getComponentGroupAry,
} from '#layers/utils/dataUtil'

interface Props {
  components: Record<string, any>
  pageVerTmplSeq: string
}

const props = defineProps<Props>()

const splideOptions = computed(() => {
  return {
    type: 'fade',
    rewind: true,
    speed: 600,
    updateOnMove: true,
    arrows: true,
    pagination: true,
    classes: {
      arrows: 'splide-arrows type-full',
      arrow: 'splide-arrow',
      prev: 'arrow-prev',
      next: 'arrow-next',
      pagination: 'splide-pagination-bullets type-full',
      page: 'splide-pagination-bullet',
    },
  }
})
</script>

<template>
  <section class="relative h-[640px] md:h-[1000px]">
    <Splide :options="splideOptions" class="h-full">
      <SplideSlide
        v-for="group in props.components.group_sets"
        :key="group.set_order"
        class="bg-black"
      >
        <WidgetsBackground
          v-if="hasComponentGroup(group, 'background')"
          :resources-data="getComponentGroup(group, 'background')"
        />
        <div
          class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
        >
          <WidgetsSubTitle
            v-if="hasComponentGroup(group, 'subTitle')"
            :resources-data="getComponentGroup(group, 'subTitle')"
            class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
          />
          <WidgetsMainTitle
            v-if="hasComponentGroup(group, 'mainTitle')"
            :resources-data="getComponentGroup(group, 'mainTitle')"
            class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(group, 'description')"
            :resources-data="getComponentGroup(group, 'description')"
            class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
          />
          <WidgetsButtonList
            v-if="hasComponentGroup(group, 'buttonList')"
            :groups-data="getComponentGroupAry(group, 'buttonList')"
          />
        </div>
      </SplideSlide>
    </Splide>
    <div class="slide-pagination position-absolute" />
  </section>
</template>

<style scoped>
.splide:deep(.splide__track) {
  @apply h-full;
}
</style>
