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

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const subTitleData = computed(() =>
  getComponentGroup(props.components, 'subTitle')
)
const descriptionData = computed(() =>
  getComponentGroup(props.components, 'description')
)
const slideData = computed(() => {
  return getComponentContainer(props.components, 'group_sets')
})
const buttonListData = computed(() => {
  return getComponentGroupAry(props.components, 'buttonList')
})
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})

const onArrowClick = (direction, targetIndex) => {
  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
}
</script>

<template>
  <section class="relative py-[80px] md:py-[120px]">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="section-content px-0">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-xlg mx-[20px] sm:mx-[40px]"
      />
      <WidgetsSubTitle
        v-if="subTitleData"
        :resources-data="subTitleData"
        class="title-sm mt-2 mx-[20px] sm:mx-[40px]"
      />
      <template v-if="slideData">
        <div v-if="slideData.length <= 2" class="img-container">
          <div
            v-for="(item, index) in slideData"
            :key="index"
            :class="[{ 'slide-2': slideData.length === 2 }]"
          >
            <AtomsImg
              :resources-data="getComponentGroup(item, 'imgList')"
              :page-ver-tmpl-seq="props.pageVerTmplSeq"
              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
            />
          </div>
        </div>
        <BlocksSlideDefault
          v-else
          :type="slideData.length === 3 ? 'slide' : 'loop'"
          :slide-item-length="slideData?.length"
          :arrows="slideData.length === 3 ? false : true"
          :pagination="slideData.length === 3 ? false : true"
          :pagination-data="paginationData"
          :breakpoints="{
            1023: {
              type: 'loop',
              pagination: false,
            },
          }"
          class="mt-[32px]"
          @arrow-click="onArrowClick"
        >
          <SplideSlide
            v-for="(item, index) in slideData"
            :key="index"
            class="mr-4"
          >
            <div class="slide-inner w-[295px] sm:w-[304px]">
              <AtomsImg
                :resources-data="getComponentGroup(item, 'imgList')"
                :page-ver-tmpl-seq="props.pageVerTmplSeq"
                :alt="getComponentGroup(item, 'subTitle')?.display?.text"
              />
            </div>
          </SplideSlide>
        </BlocksSlideDefault>
      </template>
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        :page-ver-tmpl-seq="props.pageVerTmplSeq"
        class="mt-[56px] mx-[20px] sm:mx-[40px]"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="mt-8 mx-[20px] sm:mx-[40px]"
      />
    </div>
  </section>
</template>

<style scoped>
.img-container {
  @apply flex flex-wrap justify-center gap-4 box-content mx-auto mt-[32px]
  max-w-[688px] px-[20px] 
  md:max-w-[944px] md:px-[40px];
}
.splide {
  @apply md:max-w-[1088px];
}
.splide:deep(.splide__track) {
  @apply md:w-[944px] md:mx-auto;
}
.splide:deep(.splide__track) {
  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
}
.splide:deep(.arrow-next) {
  @apply md:-right-[0];
}
.splide:deep(.arrow-prev) {
  @apply md:-left-[0];
}
.slide-2 {
  @apply max-w-[335px] md:max-w-[464px];
}
</style>
