<template>
    <div class="input-emoji-panel">
        <div class="input-emoji-scroll">
            <button v-for="emoji in emojiList" :key="emoji.emoji.key" class="input-emoji-item" type="button"
                @click="emitSelect(emoji)">
                <img class="input-emoji-image" :src="emoji.url" :alt="emoji.emoji.key" />
            </button>
        </div>

        <div class="input-emoji-footer">
            <button class="input-emoji-delete-button" type="button" @click="emitDeleteCharacter">
                <img :src="deleteIcon" class="input-emoji-delete-icon" alt="删除一个字符" />
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { emojiPlusName, emojiTokenSrcMap } from '../../../../../utils/emojiMap';
import deleteIcon from './delete.svg';

interface EmojiSelectionData {
    url: string;
    emoji: {
        key: string;
    };
}

const emit = defineEmits<{
    (event: 'select', emojiData: EmojiSelectionData): void;
    (event: 'delete-character'): void;
}>();

const emojiList = [...emojiPlusName]
    .map((key) => ({
        url: emojiTokenSrcMap[key],
        emoji: {
            key,
        },
    }))
    .filter((emoji): emoji is EmojiSelectionData => Boolean(emoji.url));

const emitSelect = (emojiData: EmojiSelectionData) => {
    emit('select', emojiData);
};

const emitDeleteCharacter = () => {
    emit('delete-character');
};
</script>

<style scoped>
.input-emoji-panel {
    position: relative;
    margin-top: 8px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
}

.input-emoji-scroll {
    display: grid;
    grid-template-columns: repeat(8, 25px);
    grid-auto-rows: 25px;
    justify-content: space-between;
    gap: 12px;
    max-height: 173px;
    overflow-y: auto;
    padding-right: 2px;
    padding-bottom: 52px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.input-emoji-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.input-emoji-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: none;
    background: transparent;
}

.input-emoji-image {
    display: block;
    width: 25px;
    height: 25px;
}

.input-emoji-footer {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 54px;
    height: 40px;
}

.input-emoji-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
}

.input-emoji-delete-icon {
    display: block;
    width: 54px;
    height: 40px;
}
</style>