import type { BaseContext } from "koa";
import { button } from "src/back/elements/button.js";
import { tempstream, type FlatTemplatable } from "tempstream";

export async function default_navbar(ctx: BaseContext): Promise<FlatTemplatable> {
	const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
		.list(ctx.$context)
		.fetch();
	const linkData = navbar_items.map((e) => ({
		text: e.get("label"),
		url: e.get("href"),
	}));

	const linksHTML = linkData
		.map(
			(link) => /* HTML */ tempstream`<li>
				${button({
					text: link.text || "",
					href: link.url || "",
					variant: "accent1",
					disabled: link.url == new URL(ctx.url, "https://a.com").pathname, // checking if it's the current path we're looking at
				})}
			</li>`
		)
		.join("\n");

	return /* HTML */ `<nav>
		<a href="/" class="nav-logo">
			<img
				src="/assets/logo"
				alt="${ctx.$app.manifest.name} - logo"
				width="50"
				height="50"
			/>
			${ctx.$app.manifest.name}
		</a>
		<ul>
			${linksHTML}
		</ul>
	</nav>`;
}