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

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const gameDataStore = useGameDataStore()
const pageDataStore = usePageDataStore()
const { getCwmsArticleData } = useResourcesData()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
const { locale } = useI18n()

const { gameData } = storeToRefs(gameDataStore)
const { pageData } = storeToRefs(pageDataStore)

const boardId = computed(
  () => getComponentGroup(props.components, 'boardId')?.display?.text
)
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})
const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const buttonListData = ref(getComponentGroupAry(props.components, 'buttonList'))
const descriptionData = computed(() =>
  getComponentGroup(props.components, 'description')
)

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

    const cwmsArticleData = await getCwmsArticleData('BOARD', boardId.value, {
      sortTypeCode: 'LATEST',
      translationYn: true,
      page: 1,
      size: 20,
    })

    return cwmsArticleData?.list as CwmsArticleItem[]
  },
  {
    default: () => [],
    server: false,
  }
)
const slideLength = computed(() => slideData.value.length)
const slideClass = computed(() => ({
  'is-one-item': slideLength.value === 1,
  'is-two-items': slideLength.value === 2,
  'is-three-items': slideLength.value === 3,
  'is-four-items': slideLength.value === 4,
}))
const splideOptions = computed(() => ({
  gap: 20,
  perPage: 4,
  drag: false,
  arrows: slideLength.value > 4,
  pagination: slideLength.value > 4,
  breakpoints: {
    [BREAKPOINTS.lg - 1]: {
      perPage: 2,
      arrows: slideLength.value > 2,
      pagination: slideLength.value > 2,
    },
    [BREAKPOINTS.md - 1]: {
      drag: true,
      perPage: 1,
      arrows: false,
      pagination: false,
    },
  },
}))

const getArticleUrl = (articleId: string) => {
  const communityUrl = gameData.value?.url_json?.community
  if (!communityUrl || !articleId || !boardId.value) {
    return ''
  }
  return `${communityUrl}/view/${articleId}?boardKey=${boardId.value}`
}

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 min-h-[483px] py-[80px] md:min-h-[684px] md:py-[120px]"
    :style="getPaginationClass(paginationData)"
  >
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="section-content px-0">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-md"
      />
      <ClientOnly>
        <BlocksSlideDefault
          v-if="slideLength > 0"
          :slide-item-length="slideLength"
          v-bind="splideOptions"
          :class="slideClass"
          @arrow-click="onArrowClick"
        >
          <SplideSlide
            v-for="(item, index) in slideData"
            :key="item.article_id || `real-${index}`"
          >
            <div class="slide-inner">
              <BlocksCardNews
                :title="item.title"
                :description="
                  formatTimestamp(item.create_datetime, 'YYYY.MM.DD')
                "
                :img-path="getResolvedHost(item.media_thumbnail_url)"
                :url="getArticleUrl(item.article_id)"
                link-target="_blank"
              />
            </div>
          </SplideSlide>
        </BlocksSlideDefault>
      </ClientOnly>
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        :page-ver-tmpl-seq="props.pageVerTmplSeq"
        class="mt-[48px] md:mt-[64px]"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="mt-[32px] md:mt-[48px]"
      />
    </div>
  </section>
</template>

<style scoped>
.splide {
  @apply mt-[24px] md:max-w-[776px] md:mt-[48px] md:mx-auto md:px-[72px] lg:max-w-[1428px];
}
.splide:deep(.splide__track) {
  @apply !px-[20px] md:max-w-[632px] lg:max-w-[1284px] md:mx-auto md:!px-[0] sm:!px-[40px];
}
.splide:deep(.arrow-prev) {
  @apply top-[calc(50%-28px)] left-[0];
}
.splide:deep(.arrow-next) {
  @apply top-[calc(50%-28px)] right-[0];
}
.slide-inner {
  @apply w-[275px] aspect-[1/1] md:w-[306px] md:box-border;
}

.splide.is-one-item:deep(.splide__track) {
  @apply max-w-[315px] sm:max-w-[355px] mx-auto md:max-w-[306px];
}
.splide.is-two-items:deep(.splide__track) {
  @apply lg:max-w-[632px];
}
.splide.is-two-items:deep(.splide__list) {
  @apply md:!translate-x-0;
}
.splide.is-three-items:deep(.splide__track) {
  @apply lg:max-w-[958px];
}
.splide.is-three-items:deep(.splide__list),
.splide.is-four-items:deep(.splide__list) {
  @apply lg:!translate-x-0;
}
</style>
