<script lang="ts" context="module">
	export let navbarTitle = writable<string | undefined>(undefined);
</script>

<script lang="ts">
	import { afterNavigate } from '$app/navigation';
	import { page } from '$app/stores';

	import { currentManga, currentVolume } from '$lib/catalog';

	import { colors } from '$lib/theme';
	import { writable } from 'svelte/store';
	let title: string | undefined = 'Mokuro';
	let back: string | undefined = undefined;

	afterNavigate(() => {
		console.log($page?.route.id);
		window.document.body.classList.remove('reader');

		switch ($page?.route.id) {
			case '/[manga]':
				title = $currentManga?.title;
				back = '/';
				break;
			case '/[manga]/[volume]':
				window.document.body.classList.add('reader');
				title = $currentVolume?.title;
				back = '/manga';
				break;
			case '/upload':
				title = 'Upload';
				back = '/';
				break;
			default:
				title = 'Mokuro';
				back = undefined;
				break;
		}
	});
</script>

<nav>
	<div style:background-color={colors.primaryColor}>
		{#if back}
			<a href={back}><h2>Back</h2></a>
			<h2>{title}</h2>
		{:else}
			<a href="/"><h2>{title}</h2></a>
		{/if}
	</div>
</nav>

<style>
	nav {
		position: relative;
		width: 100%;
		z-index: 1;
	}
	div {
		display: flex;
		flex: 1;
		justify-content: space-between;
		padding: 0 10px 0 10px;
		align-items: center;
		z-index: 1;
	}
</style>
