<script setup lang="ts">
import { computed, ref } from 'vue'
import emojis from '@/utils/emoji/face.json'
import yayas from '@/utils/emoji/yaya.json'
import type { IEmoji } from '@/utils/emoji/type'

const emit = defineEmits<{
  selectEmoji: [emoji: IEmoji]
}>()

type EmojiTab = 'face' | 'yaya'

const activeTab = ref<EmojiTab>('face')
const transitionName = ref('emoji-slide-left')

const emojiTabs: Array<{
  key: EmojiTab
  label: string
  list: Array<Pick<IEmoji, 'name' | 'url' | 'group'>>
}> = [
  {
    key: 'face',
    label: '默认表情',
    list: emojis,
  },
  {
    key: 'yaya',
    label: 'YAYA表情',
    list: yayas,
  },
]

const currentEmojiList = computed(() => {
  return emojiTabs.find((tab) => tab.key === activeTab.value)?.list ?? []
})

const switchTab = (nextTab: EmojiTab) => {
  if (nextTab === activeTab.value) return

  const currentIndex = emojiTabs.findIndex((tab) => tab.key === activeTab.value)
  const nextIndex = emojiTabs.findIndex((tab) => tab.key === nextTab)

  transitionName.value = nextIndex > currentIndex ? 'emoji-slide-left' : 'emoji-slide-right'
  activeTab.value = nextTab
}
</script>

<template>
  <div
    class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-all hover:bg-orange-50 hover:text-orange-500"
  >
    <el-popover placement="bottom" trigger="click" :width="384" popper-class="emoji-popover">
      <template #reference>
        <el-icon size="20" @mousedown.prevent>
          <svg-icon name="icon_face" class="cursor-pointer" />
        </el-icon>
      </template>

      <div class="emoji-panel">
        <div class="emoji-tabs">
          <button
            v-for="tab in emojiTabs"
            :key="tab.key"
            type="button"
            class="emoji-tab"
            :class="{ 'emoji-tab--active': activeTab === tab.key }"
            @click="switchTab(tab.key)"
          >
            {{ tab.label }}
          </button>
        </div>

        <el-scrollbar class="emoji-scrollbar">
          <transition :name="transitionName" mode="out-in">
            <div :key="activeTab" class="emoji-grid">
              <div v-for="item in currentEmojiList" :key="item.name">
                <el-popover
                  v-if="item.group === 'yaya'"
                  placement="top"
                  trigger="hover"
                  :offset="10"
                  :show-arrow="false"
                  :popper-style="{
                    height: '150px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }"
                >
                  <el-image :src="item.url" :alt="item.name" class="h-full w-full object-contain" />
                  <template #reference>
                    <button
                      type="button"
                      class="emoji-item"
                      :title="item.name"
                      @click="emit('selectEmoji', item as IEmoji)"
                    >
                      <img
                        :src="item.url"
                        :alt="item.name"
                        class="h-6 w-6 object-contain"
                        :class="{ 'h-8 w-8': item.group === 'yaya' }"
                      />
                    </button>
                  </template>
                </el-popover>

                <button
                  v-else
                  type="button"
                  class="emoji-item"
                  :title="item.name"
                  @click="emit('selectEmoji', item as IEmoji)"
                >
                  <img
                    :src="item.url"
                    :alt="item.name"
                    class="h-6 w-6 object-contain"
                    :class="{ 'h-8 w-8': item.group === 'yaya' }"
                  />
                </button>
              </div>
            </div>
          </transition>
        </el-scrollbar>
      </div>
    </el-popover>
  </div>
</template>

<style scoped>
.emoji-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  padding: 0 6px 8px;
  border-bottom: 1px solid #f5f5f5;
}

.emoji-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: #9ca3af;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.emoji-tab:hover {
  color: #f97316;
}

.emoji-tab--active {
  color: #ea580c;
  transform: none;
}

.emoji-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}

.emoji-scrollbar {
  height: 188px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 4px 10px;
}

.emoji-slide-left-enter-active,
.emoji-slide-left-leave-active,
.emoji-slide-right-enter-active,
.emoji-slide-right-leave-active {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.emoji-slide-left-enter-from,
.emoji-slide-right-leave-to {
  opacity: 0;
  transform: translateX(18px);
}

.emoji-slide-left-leave-to,
.emoji-slide-right-enter-from {
  opacity: 0;
  transform: translateX(-18px);
}

.emoji-slide-left-enter-to,
.emoji-slide-left-leave-from,
.emoji-slide-right-enter-to,
.emoji-slide-right-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.emoji-item:hover {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: 0 6px 14px rgb(251 146 60 / 16%);
  transform: translateY(-1px);
}
</style>
