<template>
  <MessagePluginLayout
    :message="props.message"
    :showStyle="pluginMessageType.showStyle"
    :blinkMessageIDList="props.blinkMessageIDList"
    :bubbleClassNameList="[
      pluginMessageType.pluginType === 'room' ? 'message-bubble-room' : '',
    ]"
    @resendMessage="resendMessage"
    @handleToggleMessageItem="handleToggleMessageItem"
    @handleH5LongPress="handleH5LongPress"
    :enableFeedback="props.enableFeedback"
    @like="onLike"
    @dislike="onDislike"
    :enableAINote="props.enableAINote"
  >
    <template #messageBubble>
      <MessageCustomerService
        v-if="pluginMessageType.pluginType === 'customer'"
        :message="props.message"
        @heightChanged="onHeightChanged"
        @messageSent="onMessageSent"
      />
    </template>
    <template #messageTip>
      <TimeoutWarning :payload="payload"/>
    </template>
  </MessagePluginLayout>
</template>

<script lang="ts" setup>
import vue from '../../../../../adapter-vue';
import { IMessageModel, StoreName, TUIStore } from '../../../../../@aidesk/uikit-engine';
import { isCustomerServicePluginMessage, isCustomServiceMessageInvisible } from './message-desk-elements/index';
import MessagePluginLayout from './message-plugin-layout-uniapp.vue';
import MessageCustomerService from './message-desk-elements/message-desk.vue';
import { needHackForStreamText } from "../../../../../utils/utils";
import { CUSTOM_MESSAGE_SRC } from '../../../../../constant';
import TimeoutWarning from './message-desk-elements/message-timeout-warning.vue';
import { customerServicePayloadType } from '../../../../../interface';
import { JSONToObject } from '../../../../../utils/index';
const { computed } = vue;

interface IProps {
  message: IMessageModel;
  blinkMessageIDList?: string[];
  enableFeedback: number;
  enableAINote: number;
}

const props = withDefaults(defineProps<IProps>(), {
  message: () => ({} as IMessageModel),
  blinkMessageIDList: () => [] as string[],
  enableFeedback: 0,
  enableAINote: 1,
});

const emits = defineEmits([
  'resendMessage',
  'handleToggleMessageItem',
  'handleH5LongPress',
  'heightChanged',
  'messageSent',
  'like',
  'dislike',
]);
const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));

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

const pluginMessageType = computed<{ pluginType: string; showStyle: string }>(
  () => {
    // vue2->app 兼容逻辑
    if (messageModel.value) {
      if (needHackForStreamText(messageModel.value.payload.data)) {
        TUIStore.update(StoreName.CUSTOM, 'hackedMessageID', props.message.ID);
      }
    }

    let typeObj = { pluginType: '', showStyle: '' };
    if (isCustomerServicePluginMessage(messageModel.value)) {
      const src = payload.value.src;
      typeObj = {
        pluginType: src === CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING ? 'customer_tip' : 'customer',
        showStyle: isCustomServiceMessageInvisible(messageModel.value as any)
          ? ''
          : src === CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING
            ? 'tip'
            : 'bubble',
      };
    }
    return typeObj;
  },
);

// The following are for external interaction such as messageTool, no special processing is required, please do not touch
const resendMessage = (message: IMessageModel) => {
  emits('resendMessage', message);
};
const handleToggleMessageItem = (
  e: any,
  message: IMessageModel,
  isLongpress = false,
) => {
  emits('handleToggleMessageItem', e, message, isLongpress);
};
const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
  emits('handleH5LongPress', e, message, type);
};
const onHeightChanged = () => {
  emits('heightChanged');
};
const onMessageSent = () => {
  emits('messageSent');
};
const onLike = (messageInfo: Object) => {
  emits('like', messageInfo);
};
const onDislike = (messageInfo: Object) => {
  emits('dislike', messageInfo);
};
</script>

<style lang="scss" scoped>
/* stylelint-disable-next-line no-empty-source */
</style>
