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

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

const props = defineProps<Props>()

const pageDataStore = usePageDataStore()
const { getResourcesData } = useResourcesData()

const { pageData } = storeToRefs(pageDataStore)

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const descriptionData = computed(() =>
  getComponentGroup(props.components, 'description')
)
const videoPlayData = computed(() =>
  getComponentGroup(props.components, 'videoPlay')
)
const buttonListData = computed(() =>
  getComponentGroupAry(props.components, 'buttonList')
)

// 비동기 데이터 로딩
const { data: resourcesData } = await useLazyAsyncData(
  'gr-visual-02-resources',
  async () => {
    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
      return null
    }

    return await getResourcesData({
      pageSeq: pageData.value.page_seq,
      pageVer: pageData.value.page_ver,
      pageVerTmplSeq: props.pageVerTmplSeq,
      langCode: 'ko',
    })
  }
)

// 배너 리스트 데이터 추출
const bannerListData = computed(() => {
  const operateComponents = resourcesData.value?.operate_components

  if (!operateComponents) {
    return []
  }

  const firstKey = Object.keys(operateComponents)[0]
  return operateComponents[firstKey]?.list_operate_groups || []
})

const bannerSize = {
  mo: {
    width: 293,
    height: 185,
    gap: 12,
  },
  pc: {
    width: 455,
    height: 287,
    gap: 32,
  },
}
</script>

<template>
  <section class="relative h-[640px] md:h-[1000px]">
    <WidgetsBackground
      v-if="backgroundData"
      :resources-data="backgroundData"
      :gradient="true"
    />
    <div
      class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
    >
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="w-[355px] md:w-[944px]"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="w-[355px] md:w-[944px]"
      />
      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
      <WidgetsButtonList
        v-if="buttonListData.length > 0"
        :groups-data="buttonListData"
        class="mt-[48px] md:mt-[72px]"
      />
      <WidgetsBannerList
        :slide-item-list="bannerListData"
        :slide-item-size="bannerSize"
        :arrows="true"
        :pagination="false"
        class="mt-[36px] md:mt-[60px]"
      />
    </div>
  </section>
</template>
