---
import { Image } from 'astro:assets';
import { ModeToggle } from '@/components/ModeToggle';
import HeaderLink from './HeaderLink.astro';

import logoImage from '@/assets/images/logo.png';

const navLinks = [
	{ href: '/', label: 'Home' },
	{ href: '/blog/', label: 'Blog' },
	{ href: '/recipes/', label: 'Recipes' },
];
---

<script is:inline>
	const getThemePreference = () => {
		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
			return localStorage.getItem('theme');
		}
		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
	};
	const isDark = getThemePreference() === 'dark';
	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');

	if (typeof localStorage !== 'undefined') {
		const observer = new MutationObserver(() => {
			const isDark = document.documentElement.classList.contains('dark');
			localStorage.setItem('theme', isDark ? 'dark' : 'light');
		});
		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
	}

	function setTheme(document) {
		const theme =
			localStorage.getItem('theme') ||
			(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
		document.documentElement.setAttribute('data-theme', theme);
		if (theme === 'dark') {
			document.documentElement.classList.add('dark');
		} else {
			document.documentElement.classList.remove('dark');
		}
	}

	setTheme(document);

	document.addEventListener('astro:before-swap', (ev) => {
		setTheme(ev.newDocument);
	});
</script>

<header
	x-data={`{
    open: window.innerWidth < 640 ? false : true,
    windowWidth: window.innerWidth,
    init() {
        this.$watch('windowWidth', value => {
            this.open = value < 640 ? false : true;
        });
        window.addEventListener('resize', () => {
            this.$nextTick(() => {
                this.windowWidth = window.innerWidth;
            });
        });
    }
}`}
	x-init="init()"
	class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
	<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
		<a
			href="/"
			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-semibold leading-relaxed text-inherit antialiased lg:ml-2">
			<div class="flex items-center gap-2 lg:gap-4">
				<Image
					src={logoImage}
					alt="Astro Deploy"
					class="-my-2 size-10 lg:-my-4 lg:size-14"
					loading="eager"
				/>
				Astro Deploy
			</div>
		</a>
		<div class="hidden sm:block">
			<nav
				class="mb-6 mt-4 flex min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex-row sm:p-1">
				{
					navLinks.map(({ href, label }) => (
						<HeaderLink
							href={href}
							class="block w-full rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
							{label}
						</HeaderLink>
					))
				}
			</nav>
		</div>
		<div class="flex">
			<button
				class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden"
				aria-controls="menu"
				@click="open = !open">
				<span class="sr-only">Open main menu</span>
				<span
					class="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform">
					<span
						aria-hidden="true"
						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
						:class="{'rotate-45': open,' -translate-y-1.5': !open }">
					</span>
					<span
						aria-hidden="true"
						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
						:class="{'opacity-0': open } ">
					</span>
					<span
						aria-hidden="true"
						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
						:class="{'-rotate-45': open, ' translate-y-1.5': !open}">
					</span>
				</span>
			</button>
			<ModeToggle client:load />
		</div>
	</div>
	<div class="block w-full basis-full overflow-hidden sm:hidden">
		<nav
			id="menu"
			:class="{'flex': open, 'hidden': !open}"
			x-show="open"
			x-transition:enter="transition ease-out duration-200"
			x-transition:enter-start="opacity-0 transform scale-90"
			x-transition:enter-end="opacity-100 transform scale-100"
			x-transition:leave="transition ease-in duration-200"
			x-transition:leave-start="opacity-100 transform scale-100"
			x-transition:leave-end="opacity-0 transform scale-90"
			class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:block sm:flex-row sm:p-1">
			{
				navLinks.map(({ href, label }) => (
					<HeaderLink
						href={href}
						class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start font-sans text-sm font-medium leading-tight text-zinc-900 antialiased outline-none transition-all hover:bg-zinc-50 hover:bg-opacity-80 hover:text-zinc-900 focus:bg-zinc-50 focus:bg-opacity-80 focus:text-zinc-900 active:bg-zinc-50 active:bg-opacity-80 active:text-zinc-900 dark:text-zinc-100">
						{label}
					</HeaderLink>
				))
			}
		</nav>
	</div>
</header>
