---
import ThemeToggle from "../ThemeToggle.astro";
import { MENU_LINKS } from "@/data/constants";

const url = new URL(Astro.request.url);
---

<script>
	import { toggleClass } from "@/utils";

	document.addEventListener("DOMContentLoaded", () => {
		const header = document.getElementById("main-header") as HTMLElement;
		const toggleMenuButton = document.getElementById("toggle-navigation-menu") as HTMLButtonElement;
		let menuOpen = false;

		toggleMenuButton.addEventListener("click", () => {
			toggleClass(header, "menu-open");
			menuOpen = !menuOpen;
			toggleMenuButton.setAttribute("aria-expanded", menuOpen.toString());
		});
	});
</script>

<header id="main-header" class="group relative mb-28 flex items-center sm:pl-[4.5rem]">
	<div class="flex sm:flex-col">
		<a
			href="/"
			class="inline-flex items-center sm:relative sm:inline-block"
			aria-current={url.pathname === "/" ? "page" : false}
		>
			<svg
				class="mr-3 h-10 w-6 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12"
				aria-hidden="true"
				focusable="false"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 400 400"
			>
				<title>Logo</title>
				<svg
					width="387"
					height="334"
					viewBox="0 0 387 334"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path
						d="M6.80859 330H379.955L275.803 149.691L243.564 175.635L214.147 154.88L193.382 175.635L165.695 154.88L147.526 175.635L113.457 145.367L6.80859 330Z"
						fill="#7c6f64"></path>
					<path
						d="M193.382 7L113.457 145.367L147.526 175.635L165.695 154.88L193.382 175.635L214.147 154.88L243.564 175.635L275.803 149.691L193.382 7Z"
						fill="#a89984"></path>
					<path
						d="M113.457 145.367L6.80859 330H379.955L275.803 149.691M113.457 145.367L193.382 7L275.803 149.691M113.457 145.367L147.526 175.635L165.695 154.88L193.382 175.635L214.147 154.88L243.564 175.635L275.803 149.691"
						stroke="black"
						stroke-width="7"></path>
					<line x1="206.608" y1="101.617" x2="230.392" y2="142.787" stroke="black" stroke-width="5"
					></line>
				</svg>
			</svg>
			<span class="text-xl font-bold sm:text-2xl">Steve Simkins</span>
		</a>
		<nav
			id="navigation-menu"
			class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-[color:var(--theme-menu-bg)] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:mt-1 sm:-ml-4 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"
			aria-label="Main menu"
		>
			{
				MENU_LINKS.map((link) => (
					<a
						href={link.path}
						class="py-4 px-4 sm:py-0 sm:hover:underline"
						aria-current={url.pathname === link.path ? "page" : false}
						rel="prefetch"
					>
						{link.title}
					</a>
				))
			}
		</nav>
	</div>
	<ThemeToggle />
	<button
		id="toggle-navigation-menu"
		class="group relative ml-8 h-7 w-7 sm:invisible sm:hidden"
		type="button"
		aria-label="Open main menu"
		aria-expanded="false"
		aria-haspopup="menu"
	>
		<svg
			id="line-svg"
			class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 transition-all group-aria-expanded:scale-0 group-aria-expanded:opacity-0"
			aria-hidden="true"
			focusable="false"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 24 24"
			stroke-width="1.5"
			stroke="currentColor"
		>
			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"></path>
		</svg>
		<svg
			id="cross-svg"
			class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 text-accent opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"
			class="text-accent"
			aria-hidden="true"
			focusable="false"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 24 24"
			stroke-width="1.5"
			stroke="currentColor"
		>
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
		</svg>
	</button>
</header>