---
import { Image } from "astro:assets";
import { SITE, LINKS } from "@consts";
import { cn } from "@lib/utils";
import Container from "@components/Container.astro";

import pictureOfMe from "@images/me.jpg";

const { pathname } = Astro.url;
const subpath = pathname.match(/[^/]+/g);
---

<header id="header" class="fixed top-0 w-full h-16 z-50">
    <Container size="md">
        <div class="relative h-full w-full">
            <div
                class="absolute left-0 top-1/2 -translate-y-1/2 flex gap-1 font-semibold"
            >
                <a
                    href="/"
                    class="flex gap-1 text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
                >
                    <Image
                        src={pictureOfMe}
                        loading="eager"
                        alt="Me"
                        class="size-6 fill-current rounded-full"
                    />
                    <div>
                        {SITE.TITLE}
                    </div>
                </a>
            </div>

            <div
                class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
            >
                <nav
                    class="hidden md:flex items-center justify-center text-sm gap-1"
                >
                    {
                        LINKS.map((LINK) => (
                            <a
                                href={LINK.HREF}
                                class={cn(
                                    "h-8 rounded-full px-3 text-current",
                                    "flex items-center justify-center",
                                    "transition-colors duration-300 ease-in-out",
                                    pathname === LINK.HREF ||
                                        "/" + subpath?.[0] === LINK.HREF
                                        ? "bg-black dark:bg-white text-white dark:text-black"
                                        : "hover:bg-black/5 dark:hover:bg-white/20 hover:text-black dark:hover:text-white"
                                )}
                            >
                                {LINK.TEXT}
                            </a>
                        ))
                    }
                </nav>
            </div>

            <div
                class="buttons absolute right-0 top-1/2 -translate-y-1/2 flex gap-1"
            >
                <a
                    href="/search"
                    aria-label={`Search blog posts and projects on ${SITE.TITLE}`}
                    class={cn(
                        "hidden md:flex",
                        "size-9 rounded-full p-2 items-center justify-center",
                        "bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
                        "stroke-current hover:stroke-black hover:dark:stroke-white",
                        "border border-black/10 dark:border-white/25",
                        "transition-colors duration-300 ease-in-out",
                        pathname === "/search" ||
                            "/" + subpath?.[0] === "/search"
                            ? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
                            : ""
                    )}
                >
                    <svg class="size-full">
                        <use href="/ui.svg#search"></use>
                    </svg>
                </a>

                <a
                    href="/rss.xml"
                    target="_blank"
                    aria-label={`Rss feed for ${SITE.TITLE}`}
                    class={cn(
                        "hidden md:flex",
                        "size-9 rounded-full p-2 items-center justify-center",
                        "bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
                        "stroke-current hover:stroke-black hover:dark:stroke-white",
                        "border border-black/10 dark:border-white/25",
                        "transition-colors duration-300 ease-in-out"
                    )}
                >
                    <svg class="size-full">
                        <use href="/ui.svg#rss"></use>
                    </svg>
                </a>

                <button
                    id="header-theme-button"
                    aria-label={`Toggle light and dark theme`}
                    class={cn(
                        "hidden md:flex",
                        "size-9 rounded-full p-2 items-center justify-center",
                        "bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
                        "stroke-current hover:stroke-black hover:dark:stroke-white",
                        "border border-black/10 dark:border-white/25",
                        "transition-colors duration-300 ease-in-out"
                    )}
                >
                    <svg class="size-full block dark:hidden">
                        <use href="/ui.svg#sun"></use>
                    </svg>
                    <svg class="size-full hidden dark:block">
                        <use href="/ui.svg#moon"></use>
                    </svg>
                </button>

                <button
                    id="header-drawer-button"
                    aria-label={`Toggle drawer open and closed`}
                    class={cn(
                        "flex md:hidden",
                        "size-9 rounded-full p-2 items-center justify-center",
                        "bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
                        "stroke-current hover:stroke-black hover:dark:stroke-white",
                        "border border-black/10 dark:border-white/25",
                        "transition-colors duration-300 ease-in-out"
                    )}
                >
                    <svg id="drawer-open" class="size-full">
                        <use href="/ui.svg#menu"></use>
                    </svg>
                    <svg id="drawer-close" class="size-full">
                        <use href="/ui.svg#x"></use>
                    </svg>
                </button>
            </div>
        </div>
    </Container>
</header>

<style>
    #header-drawer-button > #drawer-open {
        @apply block;
    }

    #header-drawer-button > #drawer-close {
        @apply hidden;
    }

    #header-drawer-button.open > #drawer-open {
        @apply hidden;
    }

    #header-drawer-button.open > #drawer-close {
        @apply block;
    }
</style>

<script is:inline>
    function toggleDrawer() {
        const drawer = document.getElementById("drawer");
        const drawerButton = document.getElementById("header-drawer-button");
        drawer?.classList.toggle("open");
        drawerButton?.classList.toggle("open");
    }

    function initializeDrawerButton() {
        const drawerButton = document.getElementById("header-drawer-button");
        drawerButton?.addEventListener("click", toggleDrawer);
    }

    document.addEventListener("astro:after-swap", initializeDrawerButton);
    initializeDrawerButton();
</script>
