<template>
    <div>
        <div v-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.MENU" class="message-customer-service-tip-text">
            {{ menuMessageText }}
        </div>

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.NO_SEAT_ONLINE"
            class="message-customer-service-tip-text">
            {{ t('暂无客服在线') }}
        </div>

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.END"
            class="message-customer-service-tip-text">
            {{ t('会话已结束') }}
        </div>

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.TIMEOUT"
            class="message-customer-service-tip-text">
            {{ t('会话超时结束') }}
        </div>

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.MENU_SELECTED"
            class="message-customer-service-tip-text">
            {{ t('用户已对您的服务作出评价') }}
        </div>

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.SESSION_TAKEOVER"
            class="message-customer-service-tip-text">
            {{ sessionTakeoverText }}
        </div>

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.USER_TIMEOUT_REMIND"
            class="message-customer-service-tip-text">
            {{ customerServicePayload.content }}
        </div>

        <BranchMessage
            v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.BRANCH || customerServicePayload.src === CUSTOM_MESSAGE_SRC.WELCOME_CARD || customerServicePayload.src === CUSTOM_MESSAGE_SRC.NEW_BRANCH"
            :payload="branchMessagePayload" />

        <div v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.FROM_INPUT" class="message-text">
            {{ customerServicePayload.content?.header || customerServicePayload.content?.title }}
        </div>

        <ProductCard v-else-if="isProductCardMessage" :payload="customerServicePayload" :message="message" />

        <OrderCard v-else-if="isOrderCardMessage" :payload="customerServicePayload" :message="message" />

        <StreamMessage v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.RICH_TEXT"
            :markdown="customerServicePayload.content" @preview-image="handleRichTextPreviewImage" />

        <StreamMessage v-else-if="customerServicePayload.src === CUSTOM_MESSAGE_SRC.STREAM_TEXT"
            :markdown="customerServicePayload.chunks?.join('') ?? ''" @preview-image="handleRichTextPreviewImage" />

        <ChatbotInfoCollectMessage v-else-if="isNewInfoCollectMessage" :data="infoCollectMessageData"
            :message="message" />
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'

import AIDeskCoreInstance, { CUSTOM_MESSAGE_SRC, JSONToObject, StoreName, type IMessageModel } from '@tencentcloud/ai-desk-core'

import BranchMessage from './BranchMessage.vue'
import ChatbotInfoCollectMessage from './ChatbotInfoCollectMessage.vue'
import OrderCard from './OrderCard.vue'
import ProductCard from './ProductCard.vue'
import StreamMessage from '../../StreamMessage.vue'
import type { customerServicePayloadType } from '../../../../../utils/index.ts'

interface Props {
    message: IMessageModel
}

const props = defineProps<Props>()

const emit = defineEmits<{
    (event: 'preview-image', previewImageId: string): void
}>()

const { t } = useI18n()
const currentUserId = ref('')

const onUserIdUpdated = (userId: string) => {
    currentUserId.value = userId ?? ''
}

onMounted(() => {
    AIDeskCoreInstance.coreStore.watch(StoreName.USERINFO, {
        userId: onUserIdUpdated,
    })
})

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.USERINFO, {
        userId: onUserIdUpdated,
    })
})

const customerServicePayload = computed<customerServicePayloadType>(() => {
    return JSONToObject(props.message?.payload?.data) ?? {}
})

const sessionTakeoverText = computed(() => {
    const seat = customerServicePayload.value?.content?.seat ?? ''
    return currentUserId.value === seat
        ? t('会话已介入')
        : t('当前会话已被 {name} 介入', { name: seat })
})

const isProductCardMessage = computed(() => {
    return customerServicePayload.value?.src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD
})

const isOrderCardMessage = computed(() => {
    return customerServicePayload.value?.src === CUSTOM_MESSAGE_SRC.ORDER_CARD
})

const isNewInfoCollectMessage = computed(() => {
    return customerServicePayload.value?.src === CUSTOM_MESSAGE_SRC.NEW_INFO_COLLECT
})

const menuMessageText = computed(() => {
    if (customerServicePayload.value?.sendFrom === 'agent') {
        return t('您已成功向用户发送了评价邀请')
    }

    if (customerServicePayload.value?.sendFrom === 'user') {
        return t('用户主动发起评价邀请')
    }

    if (customerServicePayload.value?.sendFrom === 'system') {
        return t('系统发送了评价邀请')
    }

    return t('您已成功向用户发送了评价邀请')
})

const branchMessagePayload = computed(() => {
    return customerServicePayload.value
})

const infoCollectMessageData = computed(() => {
    return customerServicePayload.value
})

const handleRichTextPreviewImage = ({ index }: { index: number }) => {
    if (!props.message?.ID || index < 0) {
        return
    }

    emit('preview-image', `${props.message.ID}__rich_text_image_${index}`)
}
</script>

<style scoped>
.message-customer-service-tip-text {
    word-break: break-all;
    overflow-wrap: break-word;
    font-size: 12px;
    color: #999;
}

.from-input-text {
    white-space: pre-wrap;
}

.message-text {
    display: inline;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    text-size-adjust: none;
}
</style>