import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

import { Icon } from "$/ui/objects/Icon.tsx";

import { nav } from "../../data/nav.ts";
import { ActionButton } from "../objects/ActionButton.tsx";
import { Navbar } from "../objects/Navbar.tsx";
import { NavbarItem } from "../objects/NavbarItem.tsx";
import { Logo } from "./Logo.tsx";

export type Props = HTMLAttributes<"header"> & {
	"url": string;
	"mode"?: "compact" | "none";
	"at-end"?: boolean;
	"hidden"?: boolean;
	"sm"?: JSX.Element;
	"end"?: JSX.Element;
	"children"?: JSX.Element;
};

export const SiteHeader = ({
	children,
	sm,
	url,
	mode,
	"at-end": atEnd,
	hidden,
	end,
	class: cls,
	...props
}: Props) => {
	const navItems = nav.map((item) => ({
		...item,
		selected: new RegExp(`^${item.url.replace("/#", "/")}`).test(url),
	}));

	const parent = navItems
		.filter((item) => item.url !== url)
		.reduce(
			(parent: (typeof navItems)[number] | undefined, item) =>
				item.selected && item.url.length > (parent?.url.length ?? 0) ? item : parent,
			undefined,
		);
	const selected = navItems.reduce(
		(sel, item) => (item.selected && item.url.length > sel.url.length ? item : sel),
		{
			icon: "",
			label: "Back",
			selected: true,
			url: "/",
		},
	);

	const variant = atEnd ? "static-white" : undefined;

	return (
		<header
			class:list={[
				"c-site-header",
				"l-media",
				{ "c-site-header--end": atEnd, "c-site-header--hidden": hidden },
				cls,
			]}
			{...props}
		>
			<Logo class="c-site-header__logo l-media__block" variant={variant} />

			{mode !== "none" && (
				<>
					<Navbar aria-label="Mainmenu" class="c-site-header__nav l-media__block" variant={variant}>
						{mode === "compact" ? (
							<NavbarItem
								href={selected.url}
								pre={<Icon icon="arrow-left" variant="bold" />}
								selected
							>
								{selected.label}
							</NavbarItem>
						) : (
							navItems
								.filter((item) => item.url !== "/" && !item.hidden)
								.map((item) => (
									<NavbarItem as="a" href={item.url} selected={item.selected}>
										{item.label}
									</NavbarItem>
								))
						)}
					</Navbar>

					{parent && (
						<ActionButton
							align-block
							class="c-site-header__back l-media__block"
							href={parent.url}
							icon={<Icon icon="arrow-left" variant="bold" />}
							level="quiet"
							pill
						/>
					)}
				</>
			)}

			{children}

			{sm && <div class="c-site-header__slot c-site-header__slot--sm">{sm}</div>}

			{end && (
				<>
					<div class="c-site-header__spacer" />
					<div class="c-site-header__slot c-site-header__slot--end">{end}</div>
				</>
			)}

			<Logo
				class="c-site-header__logo c-site-header__logo--sm l-media__block"
				size="sm"
				variant={variant}
			/>
		</header>
	);
};