<!-- svelte-ignore a11y-missing-content -->
<script>
	import "$lib/css/base.css";
	import "$lib/css/navbar.css";
	import { page } from "$app/stores";
	import anime from "animejs";
	import mainjson from "$lib/json/main.json"

	import Search from "$lib/components/search.svelte";

	const SCROLL = 150;

	$: pageUrl = $page.url.pathname;
	let scrollY = 0;
	let cursorX;
	let cursorY;

	let navbar_title;
	let navbar_category;

	function isActive(str, url) {
		if (url === str) return "navbar-active";
		else return "";
	}

	function isActiveMultiple(strArray, url) {
		for (const str of strArray) {
			const returnVal = isActive(str, url);
			if (returnVal != "") return returnVal;
		}
		return "";
	}

	function update_gradient(event, div) {
		const rect = div.getBoundingClientRect();
		cursorX = event.clientX - rect.left;
		cursorY = event.clientY - rect.top;
		div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--navbar-ligher) 0%, var(--navbar-darker) 100%)`;
	}

	function animateForeground(isEntering, div_back) {
		const targetOpacity = isEntering ? 1 : 0;

		anime({
			targets: div_back,
			opacity: [1 - targetOpacity, targetOpacity],
			duration: 400,
			easing: "easeInOutQuad",
		});
	}

	function changeScroll() {
		document.documentElement.style.setProperty(
			"--navbar-height",
			scrollY < SCROLL ? "6rem" : "5rem",
		);
	}
</script>

<svelte:window bind:scrollY on:scroll={changeScroll} />

<!-- Navbar -->
<nav class={scrollY < SCROLL ? "flex-row" : "flex-row floating"}>
	<div
		role="banner"
		class={scrollY < SCROLL
			? "disabled"
			: "navbar-height flex-row container"}
		on:mousemove={(event) => {
			update_gradient(event, navbar_title);
		}}
		on:mouseenter={() => {
			animateForeground(true, navbar_title);
		}}
		on:mouseleave={() => {
			animateForeground(false, navbar_title);
		}}
	>
		<div class="navbar-title content">
			<h1 class="title">Etheryo</h1>
		</div>
	</div>

	<div
		role="banner"
		class="navbar-height flex-row flex-end container"
		on:mousemove={(event) => {
			update_gradient(event, navbar_category);
		}}
		on:mouseenter={() => {
			animateForeground(true, navbar_category);
		}}
		on:mouseleave={() => {
			animateForeground(false, navbar_category);
		}}
	>
		<div class="content navbar-categories">
			<div>
				<a class={isActive("/", pageUrl)} href="/">{mainjson.tab.hub}</a>
			</div>
			<div>
				<a class={isActive("/projects", pageUrl)} href="/projects">{mainjson.tab.projects}</a>
			</div>
			<div>
				<a class={isActive("/about", pageUrl)} href="/about">{mainjson.tab.about}</a>
			</div>
			<div>
				<a href="https://blog.etheryo.fr">{mainjson.tab.blog}</a>
			</div>
			<div>
				<a href="https://git.etheryo.fr">{mainjson.tab.lab}</a>
			</div>
		</div>
		<div class={scrollY < SCROLL ? "navbar-overlay-front" : ""}></div>
		<div
			class={scrollY < SCROLL ? "navbar-overlay-back" : ""}
			bind:this={navbar_category}
		></div>
	</div>
</nav>
