<script setup lang="ts">
import type {
  PageDataResourceGroup,
  PageDataResourceGroupBtnInfo,
} from '#layers/types/api/pageData'
import type { ButtonType } from '#layers/types/components/button'

interface ButtonListProps {
  resourcesData: PageDataResourceGroup[]
  pageVerTmplSeq: number
}

const props = defineProps<ButtonListProps>()

const { gameData } = useGameDataStore()
const BUTTON_TYPE_MAP = {
  URL: {
    _self: 'internal' as const,
    _blank: 'external' as const,
  },
  DOWNLOAD: 'download' as const,
} as const
const DEFAULT_BUTTON_TYPE: ButtonType = 'action'

const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
  const btnType = btnInfo?.detail?.btn_type
  const btnTarget = btnInfo?.detail?.action?.link_target

  if (btnType === 'URL' && btnTarget) {
    return BUTTON_TYPE_MAP.URL[btnTarget] || DEFAULT_BUTTON_TYPE
  }

  if (btnType === 'DOWNLOAD') {
    return BUTTON_TYPE_MAP.DOWNLOAD
  }

  return DEFAULT_BUTTON_TYPE
}

const getButtonBackgroundImage = (
  btnInfo: PageDataResourceGroupBtnInfo
): string => {
  const marketType = btnInfo?.detail?.market_type
  const marketImageMap: Record<string, string> = {
    google_play: '/images/common/btn_logo-google.svg',
    app_store: '/images/common/btn_logo-app.svg',
    pc: '/images/common/btn_logo-pc.svg',
  }

  if (marketType && marketImageMap[marketType]) {
    return marketImageMap[marketType]
  }

  return ''
}

const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo, index: any) => {
  sendLog(locale.value, useAnalyticsLogDataDirect(props.resourcesData[index], props.pageVerTmplSeq))

  const marketType = btnInfo?.detail?.market_type
  if (marketType) {
    const url = gameData?.market[marketType]?.url
    window.open(url, '_blank')
    return
  }
}
</script>

<template>
  <div
    v-if="props.resourcesData?.length"
    class="flex flex-wrap justify-center gap-3 md:gap-4"
  >
    <AtomsButton
      v-for="(button, index) in props.resourcesData"
      :key="index"
      :type="getButtonType(button.btn_info)"
      :target="button.btn_info?.detail?.action?.link_target"
      :href="button.btn_info?.detail?.action?.url"
      :rel="button.btn_info?.detail?.action?.rel"
      :background-color="
        getColorCode({
          colorName: button.btn_info?.color_name_btn,
          colorCode: button.btn_info?.color_code_btn,
        })
      "
      :text-color="
        getColorCode({
          colorName: button.btn_info?.color_name_txt,
          colorCode: button.btn_info?.color_code_txt,
        })
      "
      :disabled="button.btn_info?.disabled"
      :class="button.btn_info?.detail?.market_type ? 'btn-market' : ''"
      :style="{
        backgroundImage: `url(${getButtonBackgroundImage(button.btn_info)})`,
      }"
      @click="handleButtonClick(button.btn_info, index)"
    >
    {{ button.btn_info?.txt_btn_name }}
    </AtomsButton>
  </div>
</template>

<style scoped>
:deep(.btn-market) {
  @apply flex items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat
  min-w-[113px] pt-[22px] pl-[44px] pr-[22px] text-[11px]
  md:min-w-[150px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
}
</style>
