<template>
  <div class="toolbar-button-container">
    <div v-for="(item, index) in props.toolbarButtonList" :key="index">
      <ToolbarButtonHumanService
        v-if="item.presetId === TOOLBAR_BUTTON_TYPE.HUMAN_SERVICE && shouldRender(item) && !isInHumanService"
        :title="item.title"
        :icon="item.icon"/>
      <ToolbarButtonServiceRating
        v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.SERVICE_RATING && shouldRender(item) && isInHumanService"
        :title="item.title"
        :icon="item.icon"/>
      <ToolbarButtonEndHumanService
        v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && ((item.displayFlag === 1 && canEndConversation) || isInHumanService)"
        :title="item.title"
        :icon="item.icon"/>
      <div v-else-if="shouldRender(item) && !item.presetId" :key="index"
           :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(item, index)">
        <image v-if="isTikTok && item.icon" class="toolbar-button-icon-in-tt" :src="item.icon"></image>
        <Icon v-if="!isTikTok && item.icon" class="toolbar-button-icon" :file="item.icon" width="14px" height="14px"/>
        <div class="toolbar-button-text">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  TUIChatService,
  TUIStore,
  StoreName,
  IConversationModel
} from '../../../@aidesk/uikit-engine';
import {isH5, isTikTok} from '../../../utils/env';
import { ToolbarButtonModel } from '../../../interface';
import Icon from '../../common/Icon.vue';
import { TOOLBAR_BUTTON_TYPE } from '../../../constant';
import {
  isEnabledMessageReadReceiptGlobal,
  openSafeUrl,
  getTo,
  transferToTaskFlow,
  transferToHuman,
  isNonEmptyObject,
  debounce,
  endQueuing
} from '../../../utils/utils';
import ToolbarButtonHumanService from './toolbar-button-human-service.vue';
import ToolbarButtonServiceRating from './toolbar-button-service-rating.vue';
import ToolbarButtonEndHumanService from './toolbar-button-end-human-service.vue';
import vue from '../../../adapter-vue';

const { ref, onMounted, onUnmounted } = vue;
const canEndConversation = ref(false);
const queueNumber = ref(-1);

interface IProps {
  toolbarButtonList?: ToolbarButtonModel[]
}

const props = withDefaults(defineProps<IProps>(), {
  toolbarButtonList: () => [] as ToolbarButtonModel[]
});

const isInHumanService = ref(false);
const currentConversation = ref<IConversationModel>();

onMounted(() => {
  TUIStore.watch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdate,
  });
  TUIStore.watch(StoreName.CUSTOM, {
    isInHumanService: onInHumanServiceUpdate,
    canEndConversation: onCanEndConversationUpdate,
    isQueuing: onIsQueuingUpdate,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdate,
  });
  TUIStore.unwatch(StoreName.CUSTOM, {
    isInHumanService: onInHumanServiceUpdate,
    canEndConversation: onCanEndConversationUpdate,
    isQueuing: onIsQueuingUpdate,
  });
});

const onCurrentConversationUpdate = (conversation: IConversationModel) => {
  currentConversation.value = conversation;
}

const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean}) => {
  if (data && data.conversationID === currentConversation.value.conversationID) {
    isInHumanService.value = data.value;
  }
}

const onCanEndConversationUpdate = (data: {conversationID: string, value: boolean}) => {
  if (data && data.conversationID === currentConversation.value.conversationID) {
    canEndConversation.value = data.value;
  }
}

const onClick = debounce((item: ToolbarButtonModel, index: number) => {
  if (!currentConversation.value) {
    return;
  }

  if (item.type === 1 && item.content) {
    TUIChatService.sendTextMessage({
      to: getTo(currentConversation.value),
      conversationType: currentConversation.value.type,
      payload: {
        text: item.content
      },
      needReadReceipt: isEnabledMessageReadReceiptGlobal(),
    });
  } else if (item.type === 2  && item.content) {
    openSafeUrl(item.content);
  } else if (item.type === 3 && isNonEmptyObject(item.content)) {
    transferToTaskFlow(getTo(currentConversation.value), item.content.taskFlowID, item.content.description);
  } else if (item.type === 4 && isNonEmptyObject(item.content)) {
    transferToHuman(getTo(currentConversation.value), item.content.groupID, item.content.specificMemberList, item.content.description);
  } else if (item.type === 5 && queueNumber.value >= 0) {
    endQueuing(getTo(currentConversation.value));
  } else if (props.toolbarButtonList !== undefined && typeof props.toolbarButtonList[index].clickEvent === 'function') {
    props.toolbarButtonList[index].clickEvent();
  }
}, 300);

function shouldRender(item: ToolbarButtonModel) {
  if (item.isEnabled === 1) {
    if (item.type === 5) {
      // 转人工排队人数＜0则不展示
      if (queueNumber.value < 0) {
        return false;
      }
      return true;
    }
    return true;
  } else if (item.isEnabled === 0) {
    return false;
  } else if (item.renderCondition) {
    return typeof item.renderCondition === 'function' ? item.renderCondition() : false;
  }
  return false;
}

function onIsQueuingUpdate(data: {conversationID: string, value: number}) {
  if (data && data.conversationID === currentConversation.value.conversationID) {
    queueNumber.value = data.value;
  }
}

</script>
<style lang="scss" scoped src="./style/index.scss"></style>
