<template>
  <div
    v-if="Boolean(quoteMessage) && props.displayType !== 'audio'"
    :class="{
      'input-quote-container': true,
      'input-quote-container-h5': isH5 || isUniFrameWork,
    }"
  >
    <div class='input-quote-content-h5'>
      <div>
        <div>
          <div class="input-quote-sender-h5">
            {{ (quoteMessage.nick || quoteMessage.from) }}
          </div>
          <div class="max-one-line">
            {{ quoteContentText }}
          </div>
        </div>
      </div>
      <image v-if="isTikTok" :src="closeIcon" class="input-quote-close-icon" @click="cancelQuote" :style="{width: '14px', height: '14px', cursor: 'pointer'}"></image>
      <Icon
        v-else
        class="input-quote-close-icon"
        :file="closeIcon"
        width="14px"
        height="14px"
        @onClick="cancelQuote"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import vue from '../../../../adapter-vue';
import TUIChatEngine, {
  TUIStore,
  StoreName,
  TUITranslateService,
  IMessageModel,
} from '../../../../@aidesk/uikit-engine';
import Icon from '../../../common/Icon.vue';
import closeIcon from '../../../../assets/close-quote-icon.svg';
import { isH5, isTikTok, isUniFrameWork } from '../../../../utils/env';
import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
import { InputDisplayType } from '../../../../interface';
import { getQuoteContentForDesk } from '../../../../utils/utils';
import { MessageQuoteTypeEnum } from '../../message-list/message-elements/message-quote/interface';

const { ref, computed, onMounted, onUnmounted } = vue;
const quoteMessageType = ref<number>(0);
const emits = defineEmits(['getQuoteMessageCloudCustomData']);

interface IProps {
  displayType?: InputDisplayType;
}

const props = withDefaults(defineProps<IProps>(), {
  displayType: 'editor',
});

const TYPES = TUIChatEngine.TYPES;
const quoteMessage = ref<IMessageModel>();

onMounted(() => {
  TUIStore.watch(StoreName.CHAT, {
    quoteMessage: onQuoteMessageUpdated,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CHAT, {
    quoteMessage: onQuoteMessageUpdated,
  });
});

const quoteContentText = computed(() => {
  let _quoteContentText;
  switch (quoteMessage.value?.type) {
    case TYPES.MSG_TEXT:
      _quoteContentText = transformTextWithKeysToEmojiNames(
        quoteMessage.value.payload?.text,
      );
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_TEXT;
      break;
    case TYPES.MSG_IMAGE:
      _quoteContentText = TUITranslateService.t('TUIChat.图片');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_IMAGE;
      break;
    case TYPES.MSG_AUDIO:
      _quoteContentText = TUITranslateService.t('TUIChat.语音');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_SOUND;
      break;
    case TYPES.MSG_VIDEO:
      _quoteContentText = TUITranslateService.t('TUIChat.视频');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_VIDEO;
      break;
    case TYPES.MSG_FILE:
      _quoteContentText = TUITranslateService.t('TUIChat.文件');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_FILE;
      break;
    case TYPES.MSG_CUSTOM:
      _quoteContentText = getQuoteContentForDesk(quoteMessage.value);
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_CUSTOM;
      break;
    case TYPES.MSG_FACE:
      _quoteContentText = TUITranslateService.t('TUIChat.表情');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_FACE;
      break;
    case TYPES.MSG_MERGER:
      _quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_MERGER;
      break;
    default:
      _quoteContentText = TUITranslateService.t('TUIChat.消息');
      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_NONE;
      break;
  }
  return _quoteContentText;
});

function cancelQuote() {
  TUIStore.update(StoreName.CHAT, 'quoteMessage', {
    message: undefined,
    type: 'quote',
  });
}

function onQuoteMessageUpdated(options?: {
  message: IMessageModel;
  type: string;
}) {
  if (options && options.message && options.type === 'quote') {
    quoteMessage.value = options.message;
    const quoteMessageCloudCustomData = JSON.stringify({
      messageReply: {
        messageAbstract: quoteContentText.value,
        messageID: quoteMessage.value.ID,
        messageSender: quoteMessage.value.from,
        messageTime: quoteMessage.value.time,
        messageType: quoteMessageType.value,
      }
    });
    emits('getQuoteMessageCloudCustomData', quoteMessageCloudCustomData);
  } else {
    quoteMessage.value = undefined;
    emits('getQuoteMessageCloudCustomData', undefined);
  }
}
</script>

<style lang="scss" scoped>
%common-container-style {
  margin: 5px 30px 5px 8px;
  display: flex;
  flex: 0 1 auto;

  .input-quote-content-h5 {
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 12px;
    font-size: 12px;
    align-items: center;
    line-height: 16px;
    width: 100%;
    box-sizing: border-box;

    .max-one-line {
      flex: 0 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 320px;
    }

    .input-quote-sender-h5 {
      font-size: 10px;
      color: #00000080;
    }
  }

  .input-quote-close-icon {
    margin-left: 5px;
  }
}

.input-quote-container {
  @extend %common-container-style;

  max-width: 700px;
}

.input-quote-container-uni {
  @extend %common-container-style;

  width: fit-content;
  max-width: 250px;
  margin: 5px 60px 0 30px;
}

.input-quote-container-h5 {
  @extend %common-container-style;
  width: 100%;
  margin: 5px 0 0 0;
}
</style>
