<template>
	<div class="page_container">
		<NavBar :title="applicationTitle" />

		<div class="bg-white">
			<div class="flex items-center px-[22px] pt-4 pb-4">
				<Avatar :size="48" :src="getIcon" />
				<div>
					<div class="ml-2 max-w-[160px] truncate">{{ getTitle }}</div>
					<div v-if="isGroup" class="ml-2 max-w-[160px] truncate text-sm">
						<span class="text-sub-text">{{ $t('applyJoin') }}:</span>
						<span class="text-primary">{{ application.groupName }}</span>
					</div>
				</div>
			</div>

			<div class="mx-[22px] h-[80px] overflow-hidden rounded-md bg-[#F7F7F7] border border-[#DEDEDE]">
				<div class="px-4 py-2">{{ application.reqMsg }}</div>
			</div>

			<div class="py-3 px-[22px] text-right text-[13px] text-[#666]">
				<span v-if="isGroup">{{ $t('source') }}:{{ joinSource }}</span>
			</div>

			<div class="mb-4 flex flex-row items-center justify-around px-4">
				<van-button class="w-[160px]" type="default" :text="$t('buttons.reject')"
					@click="accessApplication(false)" />
				<van-button class="w-[160px]" type="primary" :text="$t('buttons.accept')"
					@click="accessApplication(true)" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import Avatar from '@/components/Avatar/index.vue'
	import {
		ApplicationItemSource,
		ApplicationTypeEnum,
	} from '@/components/ApplicationItem/data'
	import { GroupJoinSource } from 'open-im-sdk-wasm'
	import { IMSDK } from '@/utils/imCommon'
	import { feedbackToast } from '@/utils/common'
	import { closeToast, showLoadingToast } from 'vant'

	const friendApplicationTypes = [
		ApplicationTypeEnum.RecivedFriendApplication,
		ApplicationTypeEnum.SentFriendApplication,
	]

	type ApplicationDetailsProps = {
		type : ApplicationTypeEnum
		application : ApplicationItemSource
	}

	const { t } = useI18n()
	const router = useRouter()
	const props = defineProps<ApplicationDetailsProps>()

	const applicationTitle = friendApplicationTypes.includes(props.type)
		? t('contactMenu.newFriends')
		: t('contactMenu.newGroup')

	const getTitle = computed(() => {
		switch (props.type) {
			case ApplicationTypeEnum.RecivedFriendApplication:
				return props.application.fromNickname
			case ApplicationTypeEnum.SentFriendApplication:
				return props.application.toNickname
			case ApplicationTypeEnum.RecivedGroupApplication:
				return props.application.nickname
			case ApplicationTypeEnum.SentGroupApplication:
				return props.application.groupName
			default:
				return ''
		}
	})

	const getIcon = computed(() => {
		switch (props.type) {
			case ApplicationTypeEnum.RecivedFriendApplication:
				return props.application.fromFaceURL
			case ApplicationTypeEnum.SentFriendApplication:
				return props.application.toFaceURL
			case ApplicationTypeEnum.RecivedGroupApplication:
				return props.application.userFaceURL
			case ApplicationTypeEnum.SentGroupApplication:
				return props.application.groupFaceURL
			default:
				return ''
		}
	})

	const isGroup =
		props.type === ApplicationTypeEnum.SentGroupApplication ||
		props.type === ApplicationTypeEnum.RecivedGroupApplication

	const joinSource = computed(() => {
		if (props.application.joinSource === GroupJoinSource.Invitation) {
			return t('groupMemberApply')
		}
		if (props.application.joinSource === GroupJoinSource.Search) {
			return t('searchGroupID')
		}
		return t('scanQrCode')
	})

	const accessApplication = (isAccept : boolean) => {
		showLoadingToast({
			duration: 0,
			forbidClick: true,
			message: t('loading'),
		})
		const funcName = isGroup
			? `${isAccept ? 'accept' : 'refuse'}GroupApplication`
			: `${isAccept ? 'accept' : 'refuse'}FriendApplication`
		// @ts-ignore
		IMSDK[funcName]({
			groupID: props.application.groupID!,
			fromUserID: props.application.userID!,
			toUserID: props.application.fromUserID!,
			handleMsg: '',
		})
			.then(() => {
				feedbackToast({ onClose: router.back })
			})
			.catch((error : unknown) => feedbackToast({ error }))
			.finally(closeToast)
	}
</script>

<style lang="scss" scoped>
	:deep(.van-field) {
		background: #eee;
		padding-top: 0;
	}

	:deep(.van-field__control) {
		font-size: 13px;
		color: #666;
	}
</style>