<template>
	<van-nav-bar placeholder fixed left-arrow :clickable="false" :border="false" @click-left="back">
		<template #left>
			<img class="mr-4 h-[23px] min-w-[23px]" :src="arrows_left" alt="" />
		</template>
		<template #title>
			<div class="flex h-full flex-col justify-evenly">
				<div class="flex items-center justify-center">
					<span class="flex-1 truncate name">{{conversationStore.storeCurrentConversation.showName}}</span>
					<span>{{ titleSuffix }}</span>
					<img v-if="notAccept" class="h-4 w-4" :src="not_accept" alt="" />
				</div>
				<online-or-typing-status v-if="isSingle" />
			</div>
		</template>
		<template #right>
			<img class="mr-4 h-[23px] min-w-[23px]" :src="call" alt="" @click="showRtcSelect" />
			<img class="h-[23px] min-w-[23px]" :src="more" alt="" @click="toSetting" />
		</template>
	</van-nav-bar>
	<van-action-sheet :cancel-text="$t('buttons.cancel')" v-model:show="show" teleport="body"
		:actions="videoCallActions" @select="onActionSelect" />
</template>

<script setup lang="ts">
	import arrows_left from '@/assets/images/chatHeader/arrows_left.png'
	import not_accept from '@assets/images/conversation/not_accept.png'
	import call from '@/assets/images/chatHeader/call.png'
	import more from '@/assets/images/chatHeader/more.png'
	import useConversationStore from '@/store/modules/conversation'
	import { MessageReceiveOptType, SessionType } from 'open-im-sdk-wasm'
	import OnlineOrTypingStatus from './OnlineOrTypingStatus.vue'
	import { ActionSheetAction, showConfirmDialog } from 'vant'
	import { RtcType } from '@/constants/action'
	import { useInviteRtc } from '@/hooks/useInviteRtc'
	import { MemberListActionEnum } from '@/pages/contact/groupMemberList/data'
	import { IMSDK } from '@/utils/imCommon'
	import { CallingRoomData } from '@/pages/rtc/data'
	import emitter from '@/utils/events'

	const { t } = useI18n()

	const videoCallActions = computed(() => [
		{
			name: t('rtc.voice'),
			type: RtcType.VoiceCall,
		},
		{
			name: t('rtc.video'),
			type: RtcType.VideoCall,
		},
	]) as unknown as ActionSheetAction[]

	const router = useRouter()
	const { inviteRtc } = useInviteRtc()
	const conversationStore = useConversationStore()

	const show = ref(false)

	const isSingle = computed(
		() =>
			conversationStore.storeCurrentConversation.conversationType === SessionType.Single,
	)
	const notAccept = computed(
		() =>
			conversationStore.storeCurrentConversation.recvMsgOpt !==
			MessageReceiveOptType.Nomal,
	)
	const isNotification = computed(
		() =>
			conversationStore.storeCurrentConversation.conversationType ===
			SessionType.Notification,
	)
	const titleSuffix = computed(() => {
		let suffix = ''
		if (!isNotification.value && !isSingle.value) {
			suffix = `(${conversationStore.storeCurrentGroupInfo.memberCount || 0})`
		}
		return suffix
	})

	const back = () => {
		router.push('conversation')
	}

	const toSetting = () => {
		router.push(isSingle.value ? 'singleSetting' : 'groupSetting')
	}

	const showRtcSelect = async () => {
		if (!isSingle.value) {
			const { data } = await IMSDK.signalingGetRoomByGroupID<CallingRoomData>(
				conversationStore.currentConversation.groupID,
			)
			if (data.invitation) {
				showConfirmDialog({
					title: t('hint'),
					message: t('rtc.isJoinCalling'),
					beforeClose: (action : string) => {
						return new Promise((resolve) => {
							if (action === 'confirm') {
								emitter.emit('OPEN_RTC_MODAL', {
									invitation: data.invitation,
									participant: data.participant?.[0],
									isJoin: true,
								})
							}
							resolve(true)
						})
					},
				})
				return
			}
		}
		show.value = true
	}

	const onActionSelect = ({ type } : any) => {
		show.value = false
		if (isSingle.value) {
			inviteRtc(type, '', [conversationStore.currentConversation.userID])
		} else {
			router.push({
				path: 'groupMemberList',
				state: {
					groupID: conversationStore.storeCurrentGroupInfo.groupID,
					action:
						type === RtcType.VoiceCall
							? MemberListActionEnum.VoiceInvite
							: MemberListActionEnum.VideoInvite,
				},
			})
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.van-nav-bar__title) {
		height: 100%;
	}

	:deep(.van-nav-bar) {
		border-bottom: 1px solid #e8eaef;
	}

	.name {
		font-weight: 400;
		font-size: 1.17rem;
		color: #282828;
	}
</style>