<script lang="ts" setup>
	import { log } from "@server/logger";
	import { MenuProps } from "ant-design-vue";

	const { data, status } = useAuth();
	const itemMap = ref({
		home: "/",
		bands: "/bands",
		authors: "/authors",
		forum: "/forum",
		account: "/my-stuff",
		"edit-profile": "/my-stuff/profile",
		stories: "/my-stuff/stories",
		drafts: "/my-stuff/drafts",
		reviews: "/my-stuff/reviews",
		messages: "/messages",
		profile: `/user/${data?.value?.user?._id || 0}`,
		admin: "/admin",
		logout: "/logout",
	});
	let cur = ref<string>(
		Object.keys(itemMap.value).find(
			(a) => itemMap.value[a] === useRoute().path,
		) || useRoute().path,
	);
	let selected: string[] = [cur.value];

	const clickFn = (minfo) => {
		if (itemMap.value[minfo.key] === undefined) return;
		cur.value = itemMap.value[minfo.key];
		selected = [cur.value];
		navigateTo(itemMap.value[minfo.key]);
	};
	console.log({ label: "client", value: cur.value, stat: status.value });
</script>

<template>
	<div class="some-wrapper">
		<a-menu
			mode="horizontal"
			class="navibar"
			:style="{
				height: '40px',
				alignSelf: 'center',
				justifyContent: 'stretch',
				width: '100%',
			}"
			@click="clickFn"
			:active-key="cur"
		>
			<a-menu-item key="home"> {{ $tm("navbar.home") }} </a-menu-item>
			<a-menu-item key="bands"> {{ $tm("navbar.bands") }} </a-menu-item>
			<a-menu-item key="authors"> {{ $tm("navbar.authors") }} </a-menu-item>
			<a-menu-item key="forum"> {{ $tm("navbar.forum") }} </a-menu-item>
			<a-sub-menu
				:title="$tm('navbar.profile.myStuff') as any"
				v-if="!!data?.user"
				key="group/my-stuff"
			>
				<a-menu-item key="account"> {{ $tm("navbar.account") }} </a-menu-item>
				<a-menu-item key="edit-profile">
					{{ $tm("navbar.editProfile") }}
				</a-menu-item>
				<a-menu-item key="profile"> {{ $tm("navbar.profile") }} </a-menu-item>
				<a-menu-item key="stories"> {{ $tm("navbar.account") }} </a-menu-item>
				<a-menu-item key="drafts"> {{ $tm("navbar.account") }} </a-menu-item>
				<a-menu-item key="reviews"> {{ $tm("navbar.reviews") }} </a-menu-item>
				<a-menu-item key="messages"> {{ $tm("navbar.messages") }} </a-menu-item>
			</a-sub-menu>
			<a-menu-item key="admin" v-if="data?.user?.profile.isAdmin || false">
				{{ $tm("navbar.admin") }}
			</a-menu-item>
			<a-menu-item key="logout" v-if="!!data?.user">
				{{ $tm("navbar.logout") }}
			</a-menu-item>
		</a-menu>
		<div>
			<a-button
				v-if="data?.user"
				type="primary"
				:tooltip="$tm('newStoryButton')"
				@click="() => navigateTo('/new-story')"
			>
				<!-- <template #icon>
				</template> -->
				<icon istyle="regular" name="file-plus" />
				<span style="margin-left: 0.5em"> {{ $tm("newStoryButton") }} </span>
			</a-button>
		</div>
		<div class="acbut" v-if="!data">
			<a-button size="large" @click="() => navigateTo('/login')">
				{{ $tm("navbar.login") }}
			</a-button>
			<a-button
				size="large"
				type="primary"
				@click="() => navigateTo('/register')"
			>
				{{ $tm("navbar.register") }}
			</a-button>
		</div>
	</div>
</template>
<style scoped>
	.navibar {
		align-self: stretch;
		/* min-width: max-content; */
	}

	.acbut {
		justify-content: space-between;
		display: flex;
		flex-grow: 0.01;
		margin-left: auto;
	}

	.acbut > * + * {
		margin-left: 0.7em;
	}

	.some-wrapper {
		display: flex;
		flex-grow: 1.2;
		justify-content: stretch;
	}
</style>
