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

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

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

const imagePaths = computed(() => {
  if (!props.resourcesData?.res_path) return null

  const pcPath =
    props.resourcesData.res_path.path_pc || props.resourcesData.res_path.path_mo
  const moPath =
    props.resourcesData.res_path.path_mo || props.resourcesData.res_path.path_pc

  return {
    pc: pcPath ? getResolvedHost(pcPath) : '',
    mo: moPath ? getResolvedHost(moPath) : '',
  }
})
const displayText = computed(() => {
  return props.resourcesData?.display?.text || 'image'
})
const colorName = computed(() => {
  return props.resourcesData?.display?.color_name
})
const colorCode = computed(() => {
  return props.resourcesData?.display?.color_code
})

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

<template>
  <!-- 이미지 -->
  <picture v-if="isTypeImage(resourcesData?.resource_type) && imagePaths">
    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
    <img
      :src="imagePaths.pc"
      :alt="alt || displayText"
      :class="`w-full h-full object-${objectFit}`"
      loading="lazy"
    />
  </picture>
  <!-- 텍스트 -->
  <span
    v-else-if="isTypeText(resourcesData?.resource_type)"
    v-dompurify-html="sanitizedContent"
    :style="{ color: getColorCode({ colorName, colorCode }) }"
    class="block"
  />
</template>
