<template>
  <section class="flex flex-col">
    <header class="w-full">
      <div class="flex flex-row mt-2 mx-2 mb-2">
        <input
          v-model="search"
          id="emojiIn"
          rows="1"
          class="block w-5/6 mx-2 py-1.5 px-2 text-sm text-gray-900 bg-white rounded-3xl border border-gray-300 focus:ring-blue-500 focus:border-indigo-600 dark:border-gray-600 dark:focus:ring-blue-500 dark:focus:border-blue-500"
          placeholder="Search" />
        <span class="text-2xl">{{ emojilib[1].emojis[0].emoji }}</span>
      </div>
      <main>
        <div class="">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="relative">
            <el-tab-pane v-for="emojiGroup in filteredEmojiGroups" :name="emojiGroup.slug" class="p-2">
              <template #label>
                <span class="text-xl">{{ emojiGroup.emojis[0].emoji }}</span>
              </template>
              <div class="">
                <div class="grid grid-cols-9">
                  <div v-for="emojItem in emojiGroup.emojis">
                    <button @click="addEmoji(emojItem)">
                      <span class="text-2xl">{{ emojItem.emoji }}</span>
                    </button>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </main>
    </header>
  </section>
</template>

<script setup lang="ts">
import emojilib from '@/assets/emoji/emoji-data.json'
import type { TabsPaneContext } from 'element-plus'
import { computed, ref } from 'vue'
const search = ref('')

const emits = defineEmits(['addEmoji'])

const activeName = ref('smileys_emotion')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


const filteredEmojiGroups = computed(() => {
  // 如果搜索词为空，直接返回全部数据
  if (!search.value.trim()) {
    return emojilib
  }
  // 使用map遍历每个emoji组，然后对每组的emojis进行过滤
  return emojilib
    .map((group) => {
      const matchedEmojis = group.emojis.filter((emoji) => emoji.name.includes(search.value.toLowerCase()))

      // 如果这个组有匹配的emoji，那么返回这个组的拷贝，并替换emojis为匹配的emojis
      if (matchedEmojis.length) {
        return { ...group, emojis: matchedEmojis }
      }

      // 否则返回null
      return null
    })
    .filter(Boolean) // 使用filter(Boolean)来删除null值
})

const addEmoji = (emojiItem: any) => {
  emits('addEmoji', emojiItem)
}
</script>

<style scoped>
::v-deep(.el-tabs__item) {
  padding-left: 0;
  padding-right: 10px;
  padding-top: 0;
  padding-bottom: 0;
}
::v-deep(.el-tabs__active-bar) {
  @apply bg-indigo-600;
}
</style>
