<template>
	<div>
		<van-nav-bar placeholder fixed left-arrow :clickable="false" :border="false" @click-left="router.back()">
			<template #left>
				<img class="h-5 w-3" :src="arrows" alt="" />
			</template>

			<template #right>
				<div class="flex">
					<img class="mr-3 h-6 w-6" :src="message" alt="" @click="router.push('/interactiveMessage')" />
					<van-popover placement="bottom-end" :show-arrow="false" v-model="show" :actions="momentsMoreActions"
						@select="onSelect">
						<template #reference>
							<img class="h-6 w-6" :src="publish" alt="" @click="show = true" />
						</template>
					</van-popover>
				</div>
			</template>
		</van-nav-bar>
	</div>
</template>

<script setup lang="ts">
	import arrows from '@/assets/images/moments/back.png'
	import message from '@/assets/images/moments/message.png'
	import publish from '@/assets/images/moments/publish.png'
	import image from '@/assets/images/moments/image.png'
	import video from '@/assets/images/moments/video.png'
	import { MomentContentType } from '@/types/moment'

	const { t } = useI18n()
	const router = useRouter()

	const momentsMoreActions = computed(() => [
		{
			idx: MomentContentType.TextWithImage,
			text: t('momentsTips.picture'),
			icon: image,
		},
		{
			idx: MomentContentType.TextWithVideo,
			text: t('momentsTips.video'),
			icon: video,
		},
	])

	const show = ref(false)

	const onSelect = (action : (typeof momentsMoreActions.value)[0]) => {
		router.push({
			path: '/momentsRelease',
			query: {
				momentsType: action.idx,
			},
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.van-nav-bar) {
		background-image: url(@/assets/images/moments/background.png);
		background-position: top;
		background-size: cover;
	}

	:deep(.van-nav-bar__title) {
		color: white;
	}

	:deep(.van-icon__image) {
		width: 16px;
		height: 16px;
	}
</style>