<script setup lang="ts">
import { kebabCase } from 'scule'

interface Props {
  emoji: string
  size?: number
  type?: 'modern' | 'flat' | 'high-contrast' | 'anim' | '3d' | 'pure'
}

const props = withDefaults(defineProps<Props>(), {
  size: 40,
  type: '3d',
})
const loadingFail = ref(false)

const emojiUrl = computed(() => {
  const { emoji, type } = props
  if (type === 'pure')
    return
  const emojiName = getEmojiNameByCharacter(emoji)
  if (!emojiName)
    return
  switch (type) {
    case 'modern':
    case 'flat':
    case 'high-contrast': {
      return genCdnUrl({
        path: `icons/${type}/${kebabCase(emojiName)}.svg`,
        pkg: 'fluentui-emoji',
        version: '0.0.8',
      })
    }
    case 'anim': {
      return genCdnUrl({
        path: `assets/${emojiName}.webp`,
        pkg: '@lobehub/assets-emoji-anim',
        version: '1.0.0',
      })
    }
    case '3d': {
      return genCdnUrl({
        path: `assets/${emojiName}.webp`,
        pkg: '@lobehub/assets-emoji',
        version: '1.3.0',
      })
    }
  }
})
</script>

<template>
  <div
    v-if="type === 'pure' || !emojiUrl || loadingFail"
    class="leading-1 text-center flex justify-center items-center"
    :style="{ fontSize: `${size * 0.9}px`, height: `${size}px`, width: `${size}px` }"
  >
    {{ emoji }}
  </div>
  <div v-else :style="{ height: `${size}px`, width: `${size}px` }">
    <img
      loading="lazy"
      decoding="async"
      :alt="emoji"
      :height="size"
      :src="emojiUrl"
      :width="size"
      @error="() => (loadingFail = true)"
    >
  </div>
</template>
