<script setup lang="ts">
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
import { isTypeImage, isTypeText } from '#layers/utils/dataUtil'

interface Props {
  resourcesData?: PageDataResourceGroup
  objectFit?: 'contain' | 'cover'
  alt?: string
}

const props = withDefaults(defineProps<Props>(), {
  objectFit: 'contain',
})

const gameDataStore = useGameDataStore()
const { fontFamily } = storeToRefs(gameDataStore)

const imagePaths = computed(() => getResourceSrc(props.resourcesData))
const displayText = computed(() => props.resourcesData?.display?.text)
const displayColor = computed(() =>
  getColorCodeFromData(props.resourcesData?.display, 'none')
)

// HTML 콘텐츠 줄바꿈 처리
const sanitizedContent = computed(() => {
  return displayText.value?.replace(/\n/g, '<br/>') || ''
})

// 텍스트 스타일
const textStyle = computed(() => {
  const style: Record<string, string> = {
    color: displayColor.value,
  }

  if (props.resourcesData?.display?.use_game_font === 1) {
    style.fontFamily = fontFamily.value
  }

  return style
})
</script>

<template>
  <AtomsImg
    v-if="isTypeImage(resourcesData?.resource_type) && imagePaths"
    :src="imagePaths"
    :alt="alt || displayText"
    :class="`w-full h-full object-${objectFit}`"
  />

  <span
    v-else-if="isTypeText(resourcesData?.resource_type)"
    v-dompurify-html="sanitizedContent"
    :style="textStyle"
    class="block"
  />
</template>
