<template>
	<div class="header  px-[22px] py-4">
		<!-- <Avatar
      :size="48"
      :src="userStore.storeSelfInfo.faceURL"
      :desc="userStore.storeSelfInfo.nickname"
    /> -->
		<div class="text-xs wh5">
			<div class="flex items-center">
				<!-- <div class="max-w-[30vw] truncate text-base">
          {{ userStore.storeSelfInfo.nickname }}
        </div> -->
				<view class="ml-3 flex h-[22px] w-[76px] items-center justify-center rounded-md bg-[#F2F8FF]"
					v-if="userStore.isSyncing">
					<img class="loading h-3 w-3" :src="loading" alt="" />
					<text class="ml-0.5 text-xs text-primary">{{ $t('syncing') }}</text>
				</view>
				<view class="ml-3 flex h-[22px] w-[76px] items-center justify-center rounded-md bg-[#F2F8FF]"
					v-if="connectState === connectStateEnum.Loading">
					<img class="loading h-3 w-3" :src="loading" alt="" />
					<text class="ml-0.5 text-xs text-primary">{{ $t('connecting') }}</text>
				</view>
				<view class="ml-3 flex h-[22px] w-[76px] items-center justify-center rounded-md bg-[#FFE1DD]"
					v-if="connectState === connectStateEnum.Failed">
					<img class="h-3 w-3" :src="sync_error" alt="" />
					<text class="ml-0.5 text-xs text-error-text">{{ $t('connectFailed') }}</text>
				</view>
			</div>
		</div>
		<div class="heeadName">
			嗨聊<!-- (78) -->
		</div>
		<div class="flex wh5 flex-right">
			<!-- <img :src="call" alt="call" width="24" class="mr-2" @click="toPreviewRtcHistory" /> -->
			<van-popover :show-arrow="false" v-model:show="showPopover" :actions="conversationTopMoreActions"
				placement="bottom-end" @select="selectMenu">
				<template #reference>
					<img :src="add" alt="add" width="24" />
				</template>
			</van-popover>
		</div>
	</div>
</template>

<script setup lang="ts">
	import add_friend from '@/assets/images/conversation/add_friend.png'
	import add_group from '@/assets/images/conversation/add_group.png'
	import scan from '@/assets/images/conversation/scan.png'
	import create_group from '@/assets/images/conversation/create_group.png'
	import create_metting from '@/assets/images/conversation/metting.png'
	import Avatar from '@/components/Avatar/index.vue'
	import add from '@/assets/images/conversation/add.png'
	import call from '@/assets/images/conversation/call.png'
	import loading from '@/assets/images/conversation/loading.png'
	import sync_error from '@assets/images/conversation/sync_error.png'
	import { PopoverAction } from 'vant'
	import useUserStore from '@/store/modules/user'
	import { IMSDK } from '@/utils/imCommon'
	import { CbEvents } from 'open-im-sdk-wasm'
	import { GroupType } from 'open-im-sdk-wasm'

	enum ActionEnum {
		Scan,
		AddFriend,
		AddGroup,
		LaunchGroup,
	}

	enum connectStateEnum {
		Loading,
		Success,
		Failed,
	}

	const { t, locale } = useI18n()

	const conversationTopMoreActions : PopoverAction[] = [
		{
			text: t('scanQr'),
			icon: scan,
		},
		{
			text: t('addFriend'),
			icon: add_friend,
		},
		{
			text: t('addGroup'),
			icon: add_group,
		},
		{
			text: t('launchGroup'),
			icon: create_group,
		},
		// {
		//   text: '视频会议',
		//   icon: create_metting,
		// },
	]

	watch(locale, () => {
		conversationTopMoreActions[0].text = t('scanQr')
		conversationTopMoreActions[0].text = t('addFriend')
		conversationTopMoreActions[1].text = t('addGroup')
		conversationTopMoreActions[2].text = t('launchGroup')
		// conversationTopMoreActions[4].text = '视频会议';
	})

	const userStore = useUserStore()
	const router = useRouter()

	const showPopover = ref(false)
	const connectState = ref(connectStateEnum.Success)

	const setConnectLoading = () => (connectState.value = connectStateEnum.Loading)
	const setConnectSuccess = () => (connectState.value = connectStateEnum.Success)
	const setConnectFailed = () => (connectState.value = connectStateEnum.Failed)

	onMounted(() => {
		IMSDK.on(CbEvents.OnConnecting, setConnectLoading)
		IMSDK.on(CbEvents.OnConnectSuccess, setConnectSuccess)
		IMSDK.on(CbEvents.OnConnectFailed, setConnectFailed)
	})

	onBeforeUnmount(() => {
		IMSDK.off(CbEvents.OnConnecting, setConnectLoading)
		IMSDK.off(CbEvents.OnConnectSuccess, setConnectSuccess)
		IMSDK.off(CbEvents.OnConnectFailed, setConnectFailed)
	})

	const selectMenu = (_ : PopoverAction, idx : ActionEnum) => {
		switch (idx) {
			case ActionEnum.Scan:
				router.push('scanPage')
				break
			case ActionEnum.AddFriend:
			case ActionEnum.AddGroup:
				router.push({
					path: 'searchToJoin',
					query: {
						isGroup: String(idx === ActionEnum.AddGroup),
					},
				})
				break
			case ActionEnum.LaunchGroup:
				router.push({
					path: 'createGroup',
					query: {
						groupType: GroupType.WorkingGroup,
					},
				})
				break
			default:
				break
		}
	}

	const toPreviewRtcHistory = () => {
		router.push('previewRtcHistory')
	}
</script>

<style lang="scss" scoped>
	@keyframes loading {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading {
		animation: loading 1.5s infinite;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.wh5 {
			width: 5rem;
			min-height: 1rem;
		}

		.heeadName {
			font-weight: bold;
			font-size: 1.23rem;
			color: #000000;
		}

		.flex-right {
			flex-direction: row-reverse;
		}
	}
</style>