/* Nav construction */
const cards = [
	{
		title: "card one",
		href: "/card-one/"
	},
	{
		title: "card two",
		href: "/card-two/"
	},
	{
		title: "card three",
		href: "/card-three/"
	}
]

const constructMenuLink = function(title, href) {
	const path = window.location.pathname;

	const a = document.createElement("a");
	a.href = href;
	a.title = title;
	a.innerHTML = title;
	if (path === href) a.id = "current-page";

	return a;
}

const constructSkipLink = function() {
	const a = constructMenuLink("skip to main", "#main");
	a.id = "skip";

	return a;
}

const constructDropdown = function() {
	const div = document.createElement("div");
	div.id = "dropdown";

	const button = document.createElement("button");
	button.innerHTML = "cards ⮷";
	button.id="drop-button";
	button.ariaLabel = "card submenu";
	button.ariaExpanded = "false";
	button.type = "button";
	button.setAttribute("aria-controls", "drop-content");
	div.append(button);

	const ul = document.createElement("ul");
	ul.id = "drop-content";
	ul.ariaHidden = "true";

	for (const card of cards) {
		const li = document.createElement("li");
		li.append(constructMenuLink(card.title, card.href));
		ul.append(li);
	}

	div.append(ul);
	return div;
}

const constructNav = function() {
	const nav = document.getElementById("top-nav");
	nav.append(constructSkipLink());
	nav.append(constructMenuLink("home", "/"));
	nav.append(constructDropdown());
}

constructNav();

/* Dropdown handling */

const dropdown = document.getElementById("dropdown");
const dropdownButton = document.getElementById("drop-button");
const dropdownContent = document.getElementById("drop-content");

const dropdownItems = dropdownContent.querySelectorAll("a");
const firstDropdownItem = dropdownItems[0];
const lastDropdownItem = dropdownItems[dropdownItems.length - 1];

const openDropdown = function() {
	dropdownContent.classList.add("show");
	dropdownContent.ariaHidden = "false";
	dropdownButton.ariaExpanded = "true";
}

const closeDropdown = function() {
	if (dropdownButton.ariaExpanded === "true") {
		dropdownContent.classList.remove("show");
		dropdownContent.ariaHidden = "true";
		dropdownButton.ariaExpanded = "false";
	}
}

dropdownButton.addEventListener("click", (event) => {
	if (dropdownButton.ariaExpanded === "false") openDropdown();
	else closeDropdown();
});

dropdownButton.addEventListener("keydown", (event) => {
	if (event.key === "Enter" || event.key === " ") { // Space or Enter key
		event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
		if (dropdownButton.ariaExpanded === "false") {
			openDropdown();
		} else {
			closeDropdown();
		}
	} else if (event.key === "Tab" && event.shiftKey) closeDropdown();
});

firstDropdownItem.addEventListener("keydown", (event) => {
	if (event.key === "Tab" && event.shiftKey) closeDropdown();
});

lastDropdownItem.addEventListener("keydown", (event) => {
	if (event.key === "Tab" && !event.shiftKey) closeDropdown();
});

document.addEventListener("keydown", (event) => {
	if (event.key === "Escape" && dropdownButton.ariaExpanded === "true") {
		closeDropdown();
		dropdownButton.focus();
	}
});

window.addEventListener("click", (event) => {
	if (!event.target.matches("#drop-button")) closeDropdown();
});

/* footer */

let footerHTML = `
	<p>brought to you in 2026 by
		<a href="https://leecat.art" target="_blank">lee</a>
	</p>`;
document.getElementById("footer").innerHTML = footerHTML;
