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

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const slideData = computed(() =>
  getComponentContainer(props.components, 'group_sets', { minLength: 4 })
)
const imgTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
const descriptionData = ref(
  getComponentGroup(slideData?.value[0], 'description')
)
const buttonListData = ref(
  getComponentGroupAry(slideData?.value[0], 'buttonList')
)

const slideItemSize = {
  mo: {
    width: 275,
    height: 154,
    gap: 12,
  },
  pc: {
    width: 602,
    height: 338,
    gap: 32,
  },
}

const handleSplideMove = (
  _splide: SplideType,
  newIndex: number,
  _oldIndex: number,
  _destIndex: number
) => {
  imgTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
  descriptionData.value = getComponentGroup(
    slideData.value[newIndex],
    'description'
  )
  buttonListData.value = getComponentGroupAry(
    slideData.value[newIndex],
    'buttonList'
  )
}
const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
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="section-standard">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div
      class="content-standard justify-start pt-[80px] px-0 max-w-[2082px] mx-auto md:pt-[120px]"
    >
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
      />
      <BlocksSlideCenterHighlight
        v-if="slideData"
        :slide-item-size="slideItemSize"
        :slide-item-length="slideData?.length"
        :pagination="false"
        class="mt-[24px] md:mt-[48px]"
        @move="handleSplideMove"
        @arrow-click="onArrowClick"
      >
        <SplideSlide v-for="(item, index) in slideData" :key="index">
          <div class="slide-inner border-line">
            <BlocksVisualContent
              :resources-data="getComponentGroup(item, 'imgList')"
              object-fit="cover"
            />
          </div>
        </SplideSlide>
      </BlocksSlideCenterHighlight>
      <WidgetsSubTitle
        v-if="imgTitleData"
        :resources-data="imgTitleData"
        class="title-lg max-w-[944px] mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="max-w-[944px] mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
      />
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        :page-ver-tmpl-seq="props.pageVerTmplSeq"
        class="mt-[32px] mx-[20px] sm:mx-[40px]"
      />
    </div>
  </section>
</template>
