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

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

const props = defineProps<Props>()

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const slideData = computed(() => {
  if (props.components.group_sets.length < 3) {
    return [...props.components.group_sets, ...props.components.group_sets]
  }

  return props.components.group_sets
})
const buttonListData = ref(
  getComponentGroupAry(slideData?.value[0], 'buttonList')
)

const slideItemSize = {
  mo: {
    width: 295,
    height: 384,
    gap: 12,
    scale: 1,
  },
  pc: {
    width: 419,
    height: 564,
    gap: 20,
    scale: 1.0979,
  },
}

const handleChange = (
  _splide: SplideType,
  newIndex: number,
  _oldIndex: number,
  _destIndex: number
) => {
  buttonListData.value = getComponentGroupAry(
    slideData.value[newIndex],
    'buttonList'
  )
}
</script>

<template>
  <section class="section-container">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="section-content px-0">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-sm"
      />
      <BlocksSlideCenterFocus
        v-if="slideData"
        :slide-item-size="slideItemSize"
        :slide-item-length="slideData?.length"
        :pagination="false"
        class="mt-[24px] md:mt-[48px]"
        @move="handleChange"
      >
        <SplideSlide v-for="(item, index) in slideData" :key="index">
          <div class="slide-inner border-line mt-auto">
            <BlocksVisualContent
              :resources-data="getComponentGroup(item, 'imgList')"
              object-fit="cover"
              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
            />
          </div>
        </SplideSlide>
      </BlocksSlideCenterFocus>
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
        class="mt-[40px] md:mt-[56px]"
      />
    </div>
  </section>
</template>
