<template>
  <div class="chat-header">
    <Navigation :title="title">
      <template #left>
        <div @click="back">
          <Icon :file="backSVG" />
        </div>
      </template>
      <template #right>
        <div @click="onNavigationBarButtonTap">
          <Icon v-if="isGroup" :file="More" />
        </div>
      </template>
    </Navigation>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from '../../../adapter-vue'
  import {
    TUIStore,
    StoreName,
    IConversationModel,
    TUITranslateService
  } from '@tencentcloud/chat-uikit-engine-lite'
  import { onLoad } from '@dcloudio/uni-app'
  import Navigation from '../../common/Navigation/index.vue'
  import Icon from '../../common/Icon.vue'
  import More from '../../../assets/icon/more.svg'
  import backSVG from '../../../assets/icon/back.svg'
  import { useUI } from '../../../../utils/use-ui'
  import { endUserService } from '../../../../api/my-index'
  import { navigateBack, reLaunch } from '../../../../utils/router'

  const { showDialog, showToast } = useUI()

  const emits = defineEmits(['openGroupManagement'])
  const props = defineProps(['isGroup', 'serviceID', 'type'])

  const currentConversation = ref<IConversationModel>()
  const typingStatus = ref(false)
  const title = ref('')

  const setChatHeaderContent = (content: string) => {
    title.value = content || '云通信 IM'
  }

  const onNavigationBarButtonTap = () => {
    if (props.isGroup) {
      emits('openGroupManagement')
    }
  }

  onMounted(() => {
    TUIStore.watch(StoreName.CONV, {
      currentConversation: onCurrentConversationUpdated
    })
    TUIStore.watch(StoreName.CHAT, {
      typingStatus: onTypingStatusUpdated
    })
  })

  onUnmounted(() => {
    TUIStore.unwatch(StoreName.CONV, {
      currentConversation: onCurrentConversationUpdated
    })
    TUIStore.unwatch(StoreName.CHAT, {
      typingStatus: onTypingStatusUpdated
    })
  })

  onLoad(() => {
    setChatHeaderContent(currentConversation.value?.getShowName())
  })

  function onCurrentConversationUpdated(
    conversation: IConversationModel
  ) {
    currentConversation.value = conversation
    if (!typingStatus.value) {
      setChatHeaderContent(currentConversation?.value?.getShowName())
    }
  }

  function onTypingStatusUpdated(status: boolean) {
    typingStatus.value = status
    if (typingStatus.value) {
      setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入'))
    } else {
      setChatHeaderContent(currentConversation.value?.getShowName())
    }
  }

  const back = async () => {
    if (props.type === 'GROUP') {
      reLaunch('/')
      return
    }
    if (props.serviceID) {
      const show = await showDialog('提示', '确定要退出当前会话吗？')
      if (show) {
        await endUserService(props.serviceID)
        await showToast('结束服务成功')
        navigateBack()
      }
    } else {
      navigateBack()
    }
  }
</script>
<style lang="scss" scoped>
  .tui-navigation {
    border-bottom: 2rpx solid #0000000a;
    box-sizing: border-box;
  }
</style>
