<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[]
}

const props = defineProps<ButtonListProps>()

// 상수 정의
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 getButtonProps = (button: PageDataResourceGroup) => ({
  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,
  backgroundColor: getColorCode({
    colorName: button.btn_info?.color_name_btn,
    colorCode: button.btn_info?.color_code_btn,
  }),
  textColor: getColorCode({
    colorName: button.btn_info?.color_name_txt,
    colorCode: button.btn_info?.color_code_txt,
  }),
  disabled: button.btn_info?.disabled,
  text: button.btn_info?.txt_btn_name,
})
</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="`${button.group_code}-${index}`"
      v-bind="getButtonProps(button)"
      class="size-extra-small md:size-medium"
    >
      {{ button.btn_info?.txt_btn_name }}
    </AtomsButton>
  </div>
</template>
