<script setup lang="ts">
	import type {
		MenuItemType,
		SubMenuType,
	} from "ant-design-vue/es/menu/src/interface";
	import { ItemType, theme } from "ant-design-vue";
	import sidebarIcon from "./sidebarIconified.vue";
	import Icon from "../icon.vue";
	import { ISidebarItem } from "~/models/sidebarEntry";
	import { NuxtLink } from "#components";

	const loaded = inject<Ref<boolean>>("loaded");

	const { useToken } = theme;
	const { token } = useToken();

	const selState = ref<string>("");

	const { data: injecto } = await useApiFetch<ISidebarItem[]>("/sidebar");

	let items: Ref<ItemType[]> = ref([
		{
			key: "important",
			label: h("span", { class: "smallcaps" }, ["Pinned"]),
			icon: h(Icon, {
				istyle: "regular",
				name: "thumbtack",
				size: 19,
			}),
			children: [
				{
					key: "/submission-rules",
					label: h(
						"b",
						{
							style: {
								color: token.value.colorInfo,
							},
							class: "smallcaps",
						},
						["submission rules"],
					),
					icon: h(Icon, {
						istyle: "regular",
						name: "memo",
						size: 15,
					}),
				} as MenuItemType,
				{
					key: "/terms",
					label: "Terms of Service",
					icon: h(Icon, {
						istyle: "regular",
						name: "globe",
						size: 15,
					}),
				} as MenuItemType,
			],
		} as SubMenuType,
		{
			key: "fun-features",
			label: h("span", { class: "smallcaps" }, ["Fun features"]),
			icon: h(Icon, {
				istyle: "regular",
				name: "sparkles",
				size: 19,
			}),
			children: (injecto.value || ([] as ISidebarItem[]))
				.sort((a, b) => a.index - b.index)
				.map((b) => ({
					key: b.url,
					label: h(
						"span",
						{
							"data-color": b.color,
							class: "custom-side-item",
						},
						[h(NuxtLink, { to: b.url }, [b.linkTitle])],
					),
				})),
		} as SubMenuType,
	]);

	// console.log("wtf", items)
</script>
<template>
	<client-only>
		<a-menu
			mode="inline"
			@select="
				({ item, key, selectedKeys }) => {
					if ((key as string).startsWith('/')) {
						navigateTo(key as string);
					}
				}
			"
			:style="{
				flexGrow: 0.8,
			}"
			:trigger-sub-menu-action="'click'"
			v-model:active-key="selState"
			:items="items"
			:inline-indent="16"
		>
			<!-- <a-sub-menu>
				<template #title>
					<sidebar-icon>
						<template #icon>
							<Icon name="sparkles" istyle="regular" :size="19"/>
						</template>
						<template #rest>
							<div class="smallcaps">
								fun features
							</div>
						</template>
					</sidebar-icon>
				</template>
				<a-menu-item>
					<sidebar-icon>
						<template #icon>
							<icon name="memo" :icolor="token.colorInfo" istyle="regular" :size="13"/>
						</template>
						<template #rest>
							<nuxt-link to="/submission-rules">
								<b :style="{ color: token.colorInfo }">
									submission rules
								</b>
							</nuxt-link>
						</template>
					</sidebar-icon>
				</a-menu-item>
			</a-sub-menu> -->
		</a-menu>
	</client-only>
</template>
<style>
	.smallcaps {
		font-variant: small-caps;
	}
</style>
