<script lang="ts">
	import { appWindow } from '@tauri-apps/api/window'
	import { faWindowMinimize, faXmark } from '@fortawesome/free-solid-svg-icons'
	import { faGithub } from '@fortawesome/free-brands-svg-icons'
	import Fa from 'svelte-fa'
	import { link, location } from 'svelte-spa-router'
	import { Button } from '$components/ui/button'
	import { Moon, Sun } from 'lucide-svelte'
	import { toggleMode } from 'mode-watcher'
	import { cn } from '$lib/utils'
	import { dbStateStore } from '$lib/store/dbState'
	import { DBService } from '$lib/database'
	import { lookbackDaysStore } from '$lib/store/lookbackDaysStore'

	Fa

	// You can structure your links however you'd like, but I like to keep them in an array of objects
	type Link = {
		label: string
		href: string
	}
	const links: Link[] = [
		{
			label: 'Home',
			href: '/'
		},
		{
			label: 'Daily',
			href: '/daily'
		},
		{
			label: 'Weekly',
			href: '/weekly'
		},
		{
			label: 'Monthly',
			href: '/monthly'
		},
		{
			label: 'Yearly',
			href: '/yearly'
		}
	]
</script>

<header
	class="flex h-14 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
	data-tauri-drag-region
>
	<Button class="ml-2" on:click={toggleMode} size="icon" variant="outline">
		<Sun
			class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
		/>
		<Moon
			class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
		/>
		<span class="sr-only">Toggle theme</span>
	</Button>

	<nav
		class="flex space-x-4 text-xl font-bold select-none"
		on:dragstart|preventDefault
	>
		<div class="cursor-pointer" class:text-amber-500="{$dbStateStore.transacting}" on:click={DBService.Begin}>T
		</div>
		<div class="cursor-pointer" class:text-emerald-600={$dbStateStore.transacting} on:click={DBService.Commit}>C
		</div>
		<div class="cursor-pointer" class:text-red-700={$dbStateStore.transacting} on:click={DBService.Rollback}>R</div>
		<div contenteditable="true" bind:innerText={$lookbackDaysStore}></div>
		{#each links as { href, label }}
			<a
				use:link
				{href}
				class={cn(
          'transition-colors hover:text-foreground/80',
          href === $location ? '' : 'text-foreground/60'
        )}>{label}</a
			>
		{/each}
	</nav>

	<div class="flex h-full [&>*]:px-2 [&>*]:transition-all">
		<a
			class="flex items-center hover:text-secondary"
			href="https://github.com/Fractal-Tess/Svelte-Tauri"
			on:dragstart|preventDefault
			rel="noreferrer noopener"
			target="_blank"
		>
			<Fa icon={faGithub} size="lg" />
		</a>
		<button class="text-xl hover:text-secondary" on:click={appWindow.minimize}>
			<Fa icon={faWindowMinimize} />
		</button>
		<button class="text-2xl hover:text-secondary" on:click={appWindow.close}>
			<Fa icon={faXmark} />
		</button>
	</div>
</header>
