<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import {
  getComponentGroup,
  getComponentContainer,
} from '#layers/utils/dataUtil'
import { formatTimestamp } from '#layers/utils/formatUtil'
import { getImageHost } from '#layers/utils/styleUtil'
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 { getOperateResourcesData } = 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 descriptionData = computed(() =>
  getComponentGroup(props.components, 'description')
)
const videoPlayData = computed(() =>
  getComponentGroup(props.components, 'videoPlay')
)

const { data: slideData } = await useAsyncData(
  `gr-visual-02-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 getOperateResourcesData({
      pageSeq: pageData.value.page_seq,
      pageVer: pageData.value.page_ver,
      pageVerTmplSeq: props.pageVerTmplSeq,
      langCode: locale.value,
    })

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

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

const slideItemSize = {
  mo: {
    width: 276,
    height: 174,
    gap: 12,
  },
  pc: {
    width: 455,
    height: 287,
    gap: 32,
  },
}

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

<template>
  <section class="relative pt-[140px] pb-[80px] md:pt-[200px] md:pb-[120px]">
    <WidgetsBackground
      v-if="backgroundData"
      :resources-data="backgroundData"
      gradient="h-[440px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_40%)] md:h-[720px] md:bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_50%)]"
    />
    <div class="section-content px-0 gap-5">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
      />
      <WidgetsVideoPlay
        v-if="videoPlayData"
        :resources-data="videoPlayData"
        :page-ver-tmpl-seq="props.pageVerTmplSeq"
      />
      <BlocksSlideCenterHighlight
        v-if="slideData && slideData.length > 0"
        :slide-item-size="slideItemSize"
        :slide-item-length="slideData.length"
        :pagination="false"
        class="mt-[36px] md:mt-[60px]"
        @arrow-click="onArrowClick"
      >
        <SplideSlide v-for="(item, index) in slideData" :key="index">
          <BlocksCardNews
            :title="item.title"
            :description="formatTimestamp(item.reg_dt, 'YYYY.MM.DD')"
            :img-path="getImageHost(item.img_path)"
            :url="item.url"
            :link-target="item.link_target"
            class="slide-inner"
          />
        </SplideSlide>
      </BlocksSlideCenterHighlight>
    </div>
  </section>
</template>
