<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'
import type { OperateGroupItem } from '#layers/types/api/resourcesData'

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const pageDataStore = usePageDataStore()
const { getResourcesData } = useResourcesData()
const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

const { pageData } = storeToRefs(pageDataStore)

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)

// const buttonListData = ref(
//   getComponentGroupAry(slideData?.value[0], 'buttonList')
// )

const { data: slideData } = await useAsyncData(
  `gr-board-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
  async () => {
    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
      return []
    }

    const operateGroupList = await getResourcesData({
      pageSeq: pageData.value.page_seq,
      pageVer: pageData.value.page_ver,
      pageVerTmplSeq: props.pageVerTmplSeq,
      langCode: locale.value,
    })

    console.log('operateGroupList', operateGroupList)

    const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
      hasGroup: true,
      minLength: 4,
    }) as OperateGroupItem[]

    return bannerList
  },
  {
    default: () => [],
    server: false,
  }
)

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-md"
      />
      <BlocksSlideDefault
        v-if="slideData"
        :slide-item-length="slideData?.length"
        :pagination="false"
        class="mt-[24px] md:mt-[48px]"
        @arrow-click="onArrowClick"
      >
        <SplideSlide v-for="(item, index) in slideData" :key="index">
          <div class="slide-inner border-line">
            <BlocksVisualContent
              :resources-data="getComponentGroup(item, 'imgList')"
              :page-ver-tmpl-seq="props.pageVerTmplSeq"
              object-fit="cover"
              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
            />
          </div>
        </SplideSlide>
      </BlocksSlideDefault>
      <!-- <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        :page-ver-tmpl-seq="props.pageVerTmplSeq"
        class="mt-[40px] md:mt-[56px]"
      /> -->
    </div>
  </section>
</template>

<style scoped>
.section-container {
  @apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)] 
  after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)];
}
</style>
