import type { Context } from "koa";
import { button } from "src/back/elements/button.js";
import { tempstream } from "tempstream";
import type { FlatTemplatable } from "tempstream";
import { breadcrumbs } from "./breadcrumbs.js";
import { insert_nbsp } from "@sealcode/jdd";

export async function default_navbar(ctx: Context): 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: insert_nbsp(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 tempstream /* HTML */ `<nav>
			<a href="/" class="nav-logo">
				<img
					src="/assets/logo"
					alt="${ctx.$app.manifest.name} - logo"
					width="867"
					height="230"
					style="width:220px; height: auto"
				/>
			</a>

			<ul>
				${linksHTML}
			</ul>
		</nav>
		${breadcrumbs(ctx)} `;
}