<template>
    <div class="pc-input-toolbar">
        <EmojiButton ref="emojiRef" @select="(data) => emit('select-emoji', data)" @open="handleEmojiOpen" />

        <SendImgButton :session-id="sessionId" />
        <SendFileButton :session-id="sessionId" />
        <SendEvaluateButton v-if="!isInnerSession" :session-id="sessionId" />

        <AIResponseButton v-if="!isInnerSession && generateReplyMsgEnable === 1" ref="aiResponseRef" :session-id="sessionId"
            @use-text="(text) => emit('use-text', text)" @open="handleAIResponseOpen" />

        <TranslateButton v-if="seatMsgTranslationEnable === 1" ref="translateRef" :session-id="sessionId"
            :get-source-text="getSourceText" @translated="(text) => emit('translated', text)"
            @open="handleTranslateOpen" />

        <QuickReplyButton ref="quickReplyRef" :session-id="sessionId" @append-text="(text) => emit('append-text', text)"
            @insert-media="(payload) => emit('insert-media', payload)" @open="handleQuickReplyOpen" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import AIDeskCoreInstance, { StoreName } from '@tencentcloud/ai-desk-core';
import EmojiButton from './EmojiButton.vue';
import SendImgButton from './SendImgButton.vue';
import SendFileButton from './SendFileButton.vue';
import SendEvaluateButton from './SendEvaluateButton.vue';
import QuickReplyButton from './QuickReplyButton.vue';
import AIResponseButton from './AIResponseButton.vue';
import TranslateButton from './TranslateButton.vue';

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

defineProps<{
    sessionId: string;
    isInnerSession?: boolean;
    getSourceText: () => string;
}>();

const emit = defineEmits<{
    (e: 'select-emoji', data: EmojiSelectionData): void;
    (e: 'append-text', text: string): void;
    (e: 'insert-media', payload: { type: 'image' | 'video'; content: string; thumbImage: string }): void;
    (e: 'use-text', text: string): void;
    (e: 'translated', text: string): void;
    (e: 'panel-open'): void;
}>();

const emojiRef = ref<InstanceType<typeof EmojiButton> | null>(null);
const quickReplyRef = ref<InstanceType<typeof QuickReplyButton> | null>(null);
const aiResponseRef = ref<InstanceType<typeof AIResponseButton> | null>(null);
const translateRef = ref<InstanceType<typeof TranslateButton> | null>(null);

const seatMsgTranslationEnable = ref(0);
const generateReplyMsgEnable = ref(0);

const handleEmojiOpen = () => {
    quickReplyRef.value?.close();
    aiResponseRef.value?.close();
    translateRef.value?.close();
    emit('panel-open');
};

const handleQuickReplyOpen = () => {
    emojiRef.value?.close();
    aiResponseRef.value?.close();
    translateRef.value?.close();
    emit('panel-open');
};

const handleAIResponseOpen = () => {
    emojiRef.value?.close();
    quickReplyRef.value?.close();
    translateRef.value?.close();
    emit('panel-open');
};

const handleTranslateOpen = () => {
    emojiRef.value?.close();
    quickReplyRef.value?.close();
    aiResponseRef.value?.close();
    emit('panel-open');
};

const closeAllPanels = () => {
    emojiRef.value?.close();
    quickReplyRef.value?.close();
    aiResponseRef.value?.close();
    translateRef.value?.close();
};

const onSeatMsgTranslationEnableUpdated = (v: number) => {
    seatMsgTranslationEnable.value = v;
};

const onGenerateReplyMsgEnableUpdated = (v: number) => {
    generateReplyMsgEnable.value = v;
};

onMounted(() => {
    AIDeskCoreInstance.coreStore.watch(StoreName.APP_SETTING, {
        seatMsgTranslationEnable: onSeatMsgTranslationEnableUpdated,
        generateReplyMsgEnable: onGenerateReplyMsgEnableUpdated,
    });
});

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.APP_SETTING, {
        seatMsgTranslationEnable: onSeatMsgTranslationEnableUpdated,
        generateReplyMsgEnable: onGenerateReplyMsgEnableUpdated,
    });
});

defineExpose({ closeAllPanels });
</script>

<style scoped>
.pc-input-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
</style>
