<script setup lang="ts">
interface Props {
  src: string | { pc?: string; mo?: string }
  alt?: string
  imageType?: 'public' | 'cdn'
  /**
   * 브라우저 네이티브 priority 값
   * - 'high'  : fold 내 반드시 보여야 하는 이미지
   * - 'low'   : 중요도 낮은 이미지
   * - 'auto'  : 기본값, 브라우저에 위임
   */
  priority?: 'high' | 'low' | 'auto'
  /** 실제 이미지 로드 전까지 표시할 placeholder 이미지 경로 */
  placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
  alt: 'image',
  imageType: 'cdn',
  priority: 'auto',
})

const isResponsiveMode = computed(() => {
  return typeof props.src === 'object' && !!props.src.pc && !!props.src.mo
})

const imagePaths = computed(() => {
  if (typeof props.src === 'string') {
    const resolved = formatPathHost(props.src, {
      imageType: props.imageType,
    })
    return { pc: '', mo: resolved }
  }

  return {
    pc: props.src.pc
      ? formatPathHost(props.src.pc, {
          imageType: props.imageType,
        })
      : '',
    mo: props.src.mo
      ? formatPathHost(props.src.mo, {
          imageType: props.imageType,
        })
      : '',
  }
})

const placeholderSrc = computed(() => props.placeholder ?? '')
</script>

<template>
  <picture v-if="isResponsiveMode">
    <source
      media="(min-width: 1024px)"
      :srcset="imagePaths.pc || placeholderSrc"
    />
    <source
      media="(max-width: 1023px)"
      :srcset="imagePaths.mo || placeholderSrc"
    />
    <img
      :src="imagePaths.mo || placeholderSrc"
      :alt="alt"
      v-bind="$attrs"
      :loading="priority === 'high' ? 'eager' : 'lazy'"
      decoding="async"
      :fetchpriority="priority"
    />
  </picture>

  <img
    v-else
    :src="imagePaths.mo || placeholderSrc"
    :alt="alt"
    v-bind="$attrs"
    :loading="priority === 'high' ? 'eager' : 'lazy'"
    decoding="async"
    :fetchpriority="priority"
  />
</template>
