<template>
  <div
    :class="[
      'message-input-toolbar',
      'message-input-toolbar-h5',
      'message-input-toolbar-uni'
    ]"
  >
    <div v-if="props.displayType === 'emojiPicker'">
      <EmojiPickerDialog />
    </div>
    <swiper
      v-else
      :class="['message-input-toolbar-swiper']"
      :indicator-dots="isSwiperIndicatorDotsEnable"
      :autoplay="false"
      :circular="false"
    >
      <swiper-item
        :class="[
          'message-input-toolbar-list',
          'message-input-toolbar-h5-list',
          'message-input-toolbar-uni-list'
        ]"
      >
        <CameraUpload v-if="featureConfig.InputCamera" />
        <AlbumUpload v-if="featureConfig.InputAlbum" />
        <template v-if="currentExtensionList.length > 0">
          <div
            v-for="(extension, index) in currentExtensionList.slice(
              0,
              slicePos
            )"
            :key="index"
          >
            <ToolbarItemContainer
              v-if="extension"
              :iconFile="genExtensionIcon(extension)"
              :title="genExtensionText(extension)"
              iconWidth="25px"
              iconHeight="25px"
              :needDialog="false"
              @onIconClick="onExtensionClick(extension)"
            />
          </div>
        </template>
        <template v-if="neededCountFirstPage === 1">
          <Words
            v-if="featureConfig.InputQuickReplies"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
          <Evaluate
            v-else-if="featureConfig.InputEvaluation"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
        </template>
        <template v-if="neededCountFirstPage > 1">
          <Words
            v-if="featureConfig.InputQuickReplies"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
          <!-- <Evaluate
            v-if="featureConfig.InputEvaluation"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          /> -->
          <!-- 红包 -->
          <RedEnvelope />

          <!-- 直播按钮 -->
          <!-- #ifdef APP-PLUS -->
          <LiveStream
            v-if="
              currentConversation?.type === TUIChatEngine.TYPES.CONV_GROUP
            "
            :groupId="currentConversation?.conversationID"
          />
          <!-- #endif -->
        </template>
      </swiper-item>
      <swiper-item
        v-if="neededCountFirstPage <= 1"
        :class="[
          'message-input-toolbar-list',
          'message-input-toolbar-h5-list',
          'message-input-toolbar-uni-list'
        ]"
      >
        <div
          v-for="(extension, index) in currentExtensionList.slice(
            slicePos
          )"
          :key="index"
        >
          <ToolbarItemContainer
            v-if="extension"
            :iconFile="genExtensionIcon(extension)"
            :title="genExtensionText(extension)"
            iconWidth="25px"
            iconHeight="25px"
            :needDialog="false"
            @onIconClick="onExtensionClick(extension)"
          />
        </div>
        <template v-if="neededCountFirstPage === 1">
          <Evaluate
            v-if="featureConfig.InputEvaluation"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
        </template>
        <template v-else>
          <Words
            v-if="featureConfig.InputQuickReplies"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
          <Evaluate
            v-if="featureConfig.InputEvaluation"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
        </template>
      </swiper-item>
    </swiper>
    <UserSelector
      ref="userSelectorRef"
      :type="selectorShowType"
      :currentConversation="currentConversation"
      :isGroup="isGroup"
      @submit="onUserSelectorSubmit"
      @cancel="onUserSelectorCancel"
    />
  </div>
</template>
<script setup lang="ts">
  import TUIChatEngine, {
    IConversationModel,
    TUIStore,
    StoreName,
    TUIReportService
  } from '@tencentcloud/chat-uikit-engine-lite'
  import TUICore, {
    ExtensionInfo,
    TUIConstants
  } from '@tencentcloud/tui-core-lite'
  import { ref, onUnmounted, onMounted } from '../../../adapter-vue'
  import AlbumUpload from './album-upload/index.vue'
  import CameraUpload from './camera-upload/index.vue'
  import Evaluate from './evaluate/index.vue'
  import RedEnvelope from './red-envelope/index.vue'
  import LiveStream from './live-stream/index.vue'
  import Words from './words/index.vue'
  import ToolbarItemContainer from './toolbar-item-container/index.vue'
  import EmojiPickerDialog from './emoji-picker/emoji-picker-dialog.vue'
  import UserSelector from './user-selector/index.vue'
  import TUIChatConfig from '../config'
  import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus'
  import { ToolbarDisplayType } from '../../../interface'
  import OfflinePushInfoManager, {
    PUSH_SCENE
  } from '../offlinePushInfoManager/index'

  interface IProps {
    displayType: ToolbarDisplayType
  }

  const props = withDefaults(defineProps<IProps>(), {})

  const emits = defineEmits(['changeToolbarDisplayType'])

  const currentConversation = ref<IConversationModel>()
  const isGroup = ref<boolean>(false)
  const selectorShowType = ref<string>('')
  const userSelectorRef = ref()
  const currentUserSelectorExtension = ref<ExtensionInfo | null>()
  const currentExtensionList = ref<ExtensionInfo[]>([])
  const isSwiperIndicatorDotsEnable = ref<boolean>(false)
  const featureConfig = TUIChatConfig.getFeatureConfig()
  const neededCountFirstPage = ref<number>(8)
  const slicePos = ref<number>(0)

  const computeToolbarPaging = () => {
    if (featureConfig.InputAlbum && featureConfig.InputCamera) {
      neededCountFirstPage.value -= 2
    } else if (featureConfig.InputAlbum || featureConfig.InputCamera) {
      neededCountFirstPage.value -= 1
    }

    slicePos.value = neededCountFirstPage.value
    neededCountFirstPage.value -= currentExtensionList.value.length

    if (neededCountFirstPage.value === 1) {
      isSwiperIndicatorDotsEnable.value =
        featureConfig.InputEvaluation && featureConfig.InputQuickReplies
    } else if (neededCountFirstPage.value < 1) {
      isSwiperIndicatorDotsEnable.value =
        featureConfig.InputEvaluation || featureConfig.InputQuickReplies
    }
  }

  onMounted(() => {
    TUIStore.watch(StoreName.CUSTOM, {
      activeConversation: onActiveConversationUpdate
    })
  })

  onUnmounted(() => {
    TUIStore.unwatch(StoreName.CUSTOM, {
      activeConversation: onActiveConversationUpdate
    })
  })

  const onActiveConversationUpdate = (conversationID: string) => {
    if (!conversationID) {
      return
    }
    if (conversationID !== currentConversation.value?.conversationID) {
      getExtensionList()
      computeToolbarPaging()
      currentConversation.value = TUIStore.getData(
        StoreName.CONV,
        'currentConversation'
      )
      isGroup.value = conversationID.startsWith(
        TUIChatEngine.TYPES.CONV_GROUP
      )
    }
  }

  const getExtensionList = () => {
    const chatType = TUIChatConfig.getChatType()
    const params: Record<string, boolean | string> = { chatType }
    // Backward compatibility: When callkit does not have chatType judgment, use filterVoice and filterVideo to filter
    if (chatType === TUIConstants.TUIChat.TYPE.CUSTOMER_SERVICE) {
      params.filterVoice = true
      params.filterVideo = true
      enableSampleTaskStatus('customerService')
    }
    // uni-app build ios app has null in last index need to filter
    currentExtensionList.value = [
      ...TUICore.getExtensionList(
        TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID,
        params
      )
    ].filter((extension: ExtensionInfo) => {
      if (extension?.data?.name === 'search') {
        return featureConfig.MessageSearch
      }
      return true
    })
    reportExtension(currentExtensionList.value)
  }

  function reportExtension(extensionList: ExtensionInfo[]) {
    extensionList.forEach((extension: ExtensionInfo) => {
      const _name = extension?.data?.name
      if (_name === 'voiceCall') {
        TUIReportService.reportFeature(203, 'voice-call')
      } else if (_name === 'videoCall') {
        TUIReportService.reportFeature(203, 'video-call')
      } else if (_name === 'quickRoom') {
        TUIReportService.reportFeature(204)
      }
    })
  }

  // handle extensions onclick
  const onExtensionClick = (extension: ExtensionInfo) => {
    // uniapp vue2 build wx lose listener proto
    const extensionModel = currentExtensionList.value.find(
      targetExtension =>
        targetExtension?.data?.name === extension?.data?.name
    )
    switch (extensionModel?.data?.name) {
      case 'voiceCall':
        onCallExtensionClicked(extensionModel, 1)
        break
      case 'videoCall':
        onCallExtensionClicked(extensionModel, 2)
        break
      case 'search':
        extensionModel?.listener?.onClicked?.()
        break
      default:
        break
    }
  }

  const onCallExtensionClicked = (
    extension: ExtensionInfo,
    callType: number
  ) => {
    selectorShowType.value = extension?.data?.name
    if (
      currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C
    ) {
      extension?.listener?.onClicked?.({
        userIDList: [
          currentConversation?.value?.conversationID?.slice(3)
        ],
        type: callType,
        callParams: {
          offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(
            PUSH_SCENE.CALL
          )
        }
      })
    } else if (isGroup.value) {
      currentUserSelectorExtension.value = extension
      userSelectorRef?.value?.toggleShow &&
        userSelectorRef.value.toggleShow(true)
    }
  }

  const genExtensionIcon = (extension: any) => extension?.icon
  const genExtensionText = (extension: any) => extension?.text

  const onUserSelectorSubmit = (selectedInfo: any) => {
    currentUserSelectorExtension.value?.listener?.onClicked?.({
      ...selectedInfo,
      callParams: {
        offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(
          PUSH_SCENE.CALL
        )
      }
    })
    currentUserSelectorExtension.value = null
  }

  const onUserSelectorCancel = () => {
    currentUserSelectorExtension.value = null
  }

  const handleSwiperDotShow = (showStatus: boolean) => {
    isSwiperIndicatorDotsEnable.value =
      neededCountFirstPage.value <= 1 && !showStatus
    emits('changeToolbarDisplayType', showStatus ? 'dialog' : 'tools')
  }
</script>
<script lang="ts">
  export default {
    options: {
      styleIsolation: 'shared'
    }
  }
</script>
<style lang="scss">
  @import '../../../assets/styles/common';
  @import './style/uni';
</style>
