<template>
  <div class="chat" :style="{ marginBottom: keywordHight + 'px' }">
    <!-- <TUICallKit></TUICallKit>  -->
    <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
      <div
        v-if="!currentConversationID"
        :class="['tui-chat-default', !isPC && 'tui-chat-h5-default']"
      >
        <slot />
      </div>
      <div
        v-if="currentConversationID"
        :class="['tui-chat', !isPC && 'tui-chat-h5']"
      >
        <ChatHeader
          :isGroup="!isNotInGroup ? isGroup : null"
          :headerExtensionList="headerExtensionList"
          :serviceID="serviceID"
          :type="backStatusName"
          @closeChat="closeChat"
          @openGroupManagement="handleGroup"
        />

        <Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
        <MessageList
          ref="messageListRef"
          :class="[
            'tui-chat-message-list',
            !isPC && 'tui-chat-h5-message-list'
          ]"
          :isGroup="isGroup"
          :groupID="groupID"
          :isNotInGroup="isNotInGroup"
          :isMultipleSelectMode="isMultipleSelectMode"
          @handleEditor="handleEditor"
          @closeInputToolBar="() => changeToolbarDisplayType('none')"
          @toggleMultipleSelectMode="toggleMultipleSelectMode"
        />
        <div
          v-if="isNotInGroup"
          :class="{
            'tui-chat-leave-group': true,
            'tui-chat-leave-group-mobile': isMobile
          }"
        >
          {{ leaveGroupReasonText }}
        </div>
        <MultipleSelectPanel
          v-else-if="isMultipleSelectMode"
          @oneByOneForwardMessage="oneByOneForwardMessage"
          @mergeForwardMessage="mergeForwardMessage"
          @toggleMultipleSelectMode="toggleMultipleSelectMode"
        />
        <template v-else>
          <MessageInputToolbar
            v-if="isInputToolbarShow"
            :class="[
              'tui-chat-message-input-toolbar',
              !isPC && 'tui-chat-h5-message-input-toolbar',
              isUniFrameWork && 'tui-chat-uni-message-input-toolbar'
            ]"
            :displayType="inputToolbarDisplayType"
            @insertEmoji="insertEmoji"
            @changeToolbarDisplayType="changeToolbarDisplayType"
            @scrollToLatestMessage="scrollToLatestMessage"
          />
          <MessageInput
            ref="messageInputRef"
            :class="[
              'tui-chat-message-input',
              !isPC && 'tui-chat-h5-message-input',
              isUniFrameWork && 'tui-chat-uni-message-input',
              isWeChat && 'tui-chat-wx-message-input'
            ]"
            :enableAt="featureConfig.InputMention"
            :isMuted="false"
            :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
            :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
            :inputToolbarDisplayType="inputToolbarDisplayType"
            @changeToolbarDisplayType="changeToolbarDisplayType"
          />
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import {
    ref,
    onMounted,
    onUnmounted,
    computed
  } from '../../adapter-vue'
  import TUIChatEngine, {
    TUITranslateService,
    TUIConversationService,
    TUIStore,
    StoreName,
    IMessageModel,
    IConversationModel
  } from '@tencentcloud/chat-uikit-engine-lite'
  import TUICore, {
    TUIConstants,
    ExtensionInfo
  } from '@tencentcloud/tui-core-lite'
  // import { TUICallKit } from '@trtc/calls-uikit-vue'
  import ChatHeader from './chat-header/index.vue'
  import MessageList from './message-list/index.vue'
  import MessageInput from './message-input/index.vue'
  import MultipleSelectPanel from './mulitple-select-panel/index.vue'
  import Forward from './forward/index.vue'
  import MessageInputToolbar from './message-input-toolbar/index.vue'
  import {
    isPC,
    isWeChat,
    isUniFrameWork,
    isMobile,
    isApp
  } from '../../utils/env'
  import { ToolbarDisplayType } from '../../interface'
  import TUIChatConfig from './config'

  // @Start uniapp use Chat only
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { initChat, logout } from './entry-chat-only.ts'

  // 返回状态
  const backStatusName = ref('')

  onLoad(options => {
    backStatusName.value = options?.type || ''
    serviceID.value = options?.id || ''
    initChat(options)
  })

  onUnload(() => {
    // Whether logout is decided by yourself  when the page is unloaded. The default is false.
    logout(false)
      .then(() => {
        // Handle success result from promise.then when you set true.
      })
      .catch(() => {
        // handle error
      })
  })
  // @End uniapp use Chat only

  const emits = defineEmits(['closeChat'])
  /** 客服 id */
  const serviceID = ref('')
  const groupID = ref(undefined)
  const isGroup = ref(false)
  const isNotInGroup = ref(false)
  const notInGroupReason = ref<number>()
  const currentConversationID = ref()
  const isMultipleSelectMode = ref(false)
  const inputToolbarDisplayType = ref<ToolbarDisplayType>('none')
  const messageInputRef = ref()
  const messageListRef = ref<InstanceType<typeof MessageList>>()
  const headerExtensionList = ref<ExtensionInfo[]>([])
  const featureConfig = TUIChatConfig.getFeatureConfig()
  const keywordHight = ref(0)

  const systemInfo = uni.getSystemInfoSync()
  const screenHeight = systemInfo.screenHeight

  const windowResizeCallback = res => {
    const value = screenHeight - res.size.windowHeight
    if (value > 0 && inputToolbarDisplayType.value !== 'dialog') {
      inputToolbarDisplayType.value = 'none'
    }
    uni.$emit('scroll-to-bottom')
    keywordHight.value = value
  }
  uni.onWindowResize(windowResizeCallback)

  onMounted(e => {
    TUIStore.watch(StoreName.CONV, {
      currentConversation: onCurrentConversationUpdate
    })
  })

  onUnmounted(() => {
    TUIStore.unwatch(StoreName.CONV, {
      currentConversation: onCurrentConversationUpdate
    })
    reset()
  })

  const isInputToolbarShow = computed<boolean>(() => {
    return isUniFrameWork
      ? inputToolbarDisplayType.value !== 'none'
      : true
  })

  const leaveGroupReasonText = computed<string>(() => {
    let text = ''
    switch (notInGroupReason.value) {
      case 4:
        text = TUITranslateService.t('TUIChat.您已被管理员移出群聊')
        break
      case 5:
        text = TUITranslateService.t('TUIChat.该群聊已被解散')
        break
      case 8:
        text = TUITranslateService.t('TUIChat.您已退出该群聊')
        break
      default:
        text = TUITranslateService.t('TUIChat.您已退出该群聊')
        break
    }
    return text
  })

  const reset = () => {
    TUIConversationService.switchConversation('')
  }

  const closeChat = (conversationID: string) => {
    emits('closeChat', conversationID)
    reset()
  }

  const insertEmoji = (emojiObj: object) => {
    messageInputRef.value?.insertEmoji(emojiObj)
  }

  const handleEditor = (message: IMessageModel, type: string) => {
    if (!message || !type) return
    switch (type) {
      case 'reference':
        // todo
        break
      case 'reply':
        // todo
        break
      case 'reedit':
        if (message?.payload?.text) {
          messageInputRef?.value?.reEdit(message?.payload?.text)
        }
        break
      default:
        break
    }
  }

  const handleGroup = () => {
    headerExtensionList.value[0].listener.onClicked({
      groupID: groupID.value
    })
  }

  function changeToolbarDisplayType(type: ToolbarDisplayType) {
    setTimeout(() => {
      inputToolbarDisplayType.value =
        inputToolbarDisplayType.value === type ? 'none' : type
      if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
        uni.$emit('scroll-to-bottom')
      }
    }, 100)
  }

  function scrollToLatestMessage() {
    messageListRef.value?.scrollToLatestMessage()
  }

  function toggleMultipleSelectMode(visible?: boolean) {
    isMultipleSelectMode.value =
      visible === undefined ? !isMultipleSelectMode.value : visible
  }

  function mergeForwardMessage() {
    messageListRef.value?.mergeForwardMessage()
  }

  function oneByOneForwardMessage() {
    messageListRef.value?.oneByOneForwardMessage()
  }

  function updateUIUserNotInGroup(conversation: IConversationModel) {
    if (conversation?.operationType > 0) {
      headerExtensionList.value = []
      isNotInGroup.value = true
      /**
       * 4 - be removed from the group
       * 5 - group is dismissed
       * 8 - quit group
       */
      notInGroupReason.value = conversation?.operationType
    } else {
      isNotInGroup.value = false
      notInGroupReason.value = undefined
    }
  }

  function onCurrentConversationUpdate(conversation: IConversationModel) {
    updateUIUserNotInGroup(conversation)
    // return when currentConversation is null
    if (!conversation) {
      return
    }

    // return when currentConversationID.value is the same as conversation.conversationID.
    if (currentConversationID.value === conversation?.conversationID) {
      return
    }
    isGroup.value = false
    let conversationType = TUIChatEngine.TYPES.CONV_C2C
    const conversationID = conversation.conversationID

    if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
      conversationType = TUIChatEngine.TYPES.CONV_GROUP
      isGroup.value = true
      groupID.value = conversationID.replace(
        TUIChatEngine.TYPES.CONV_GROUP,
        ''
      )
    }
    headerExtensionList.value = []
    isMultipleSelectMode.value = false
    // Initialize chatType
    TUIChatConfig.setChatType(conversationType)
    // While converstaion change success, notify callkit and roomkit、or other components.
    TUICore.notifyEvent(
      TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
      TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED,
      { groupID: groupID.value }
    )
    // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
    TUICore.callService({
      serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
      method:
        TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD
          .ACTIVE_CONVERSATION,
      params: { conversationID: conversationID }
    })
    // When open chat in room, close main chat ui and reset theme.
    if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.ROOM) {
      if (
        TUIChatConfig.getFeatureConfig(
          TUIConstants.TUIChat.FEATURE.InputVoice
        ) === true
      ) {
        TUIChatConfig.setTheme('light')
        currentConversationID.value = ''
        return
      }
    }
    // Get chat header extensions
    if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
      headerExtensionList.value = TUICore.getExtensionList(
        TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID
      )
    }
    TUIStore.update(
      StoreName.CUSTOM,
      'activeConversation',
      conversationID
    )
    currentConversationID.value = conversationID
  }
</script>

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