<script lang="ts">
	import { ripple } from "svelte-ripple-action";
	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed, HamburgerMenu } from "radix-svelte-icons"
	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
	import DashboardNotification from "./DashboardNotification.svelte";
	import { notifications } from "#components/NotificationProvider/shared";
	import ThemeController from "#components/ThemeController.svelte";
	import { BenutzerClient } from "#components/Ausweis/types";
	import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";

	export let lightTheme: boolean;
	export let benutzer: BenutzerClient;

	const rippleOptions: RippleOptions = {
		center: false,
		color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
	};

	let headerOpen = false;
</script>

<header class="fixed top-0 left-0 w-full h-16 flex items-center justify-between px-4 border-b z-20">
	<button on:click={() => headerOpen = !headerOpen}>
		{#if headerOpen}
		<Cross1 size={28}></Cross1>
	{:else}
		<HamburgerMenu size={28}></HamburgerMenu>
	{/if}
	</button>
	<a href="/" class="block md:hidden"
		><img
			src="/images/header/logo-big.svg"
			class="w-24"
			alt="IBCornelsen - Logo"
		/></a
	>
</header>

<aside class:hidden={!headerOpen} class="fixed left-0 top-16 w-full h-[calc(100%-4rem)] flex z-30 md:relative md:h-auto md:w-auto md:top-0 md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
	<a href="/" class="px-8 hidden md:block"
		><img
			src="/images/header/logo-big.svg"
			class="w-36"
			alt="IBCornelsen - Logo"
		/></a
	>

	<div class="menu flex flex-col gap-2 mt-0 md:mt-12 px-0">
		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
			<Home width={22} height={22} />
			Home
		</a>
		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/ausweise">
			<Reader width={22} height={22} />
			Ausweise
		</a>
		<button use:ripple={rippleOptions} class="button-tab">
			<EnvelopeClosed width={22} height={22} />
			Kontakt
		</button>
		<li><details>
			<summary class="button-tab w-full outline-0 hover:outline-0">
				<Cube width={22} height={22} />
			Services</summary>
			<ul>
				<li>
					<button use:ripple={rippleOptions} class="button-tab">
						Kontakt
					</button>
				</li>
				<li>
					<button use:ripple={rippleOptions} class="button-tab">
						Kontakt
					</button>
				</li>
			</ul>
		</details></li>
		{#if benutzer.rolle === "ADMIN"}
		<li><details>
			<summary class="button-tab w-full outline-0 hover:outline-0">
				<LockClosed width={22} height={22} />
			Admin</summary>
			<ul>
				<li>
					<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/ausweise-pruefen">
						Ausweise Prüfen
					</a>
				</li>
				<li>
					<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/pdf-designer">
						PDF Designer
					</a>
				</li>
				<li>
					<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/pdf-viewer">
						PDF Viewer
					</a>
				</li>
			</ul>
		</details></li>
		{/if}
	</div>
	<div class="mt-auto flex flex-col gap-4 px-8">
		<div class="flex flex-row justify-between items-center">
			<ThemeController bind:lightTheme></ThemeController>
			<div class="dropdown dropdown-top">
				<div class="indicator">
					{#if Object.keys($notifications).length > 0}
						<span class="indicator-item badge badge-accent text-xs">{Object.keys($notifications).length}</span>
					{/if}
					<button tabindex="0" class="btn btn-square btn-ghost hover:bg-base-200">
						<Bell size={24} />
					</button>
				</div>
				<ul tabindex="0" class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80">
					<NotificationProvider component={DashboardNotification} />
				</ul>
			</div>
			
			<a href="/dashboard/einstellungen"
				class="btn btn-square btn-ghost hover:bg-base-200"
			>
				<Gear size={24} />
			</a>
		</div>
	</div>
	<div class="divider px-8"></div>
	<a
		href="/dashboard/einstellungen"
		use:ripple={rippleOptions}
		class="btn btn-ghost no-animation focus:shadow-none justify-start py-4 h-auto hover:bg-base-200 px-8 rounded-none w-full flex flex-row gap-4"
	>
		<div class="avatar">
			<div class="w-12 rounded-full">
				<img
					src={benutzer.profilbild || "/images/profile-placeholder.png"}
				/>
			</div>
		</div>
		<div class="flex flex-col gap-2">
			<span class="text-base-content font-semibold text-left"
				>{benutzer.vorname} {benutzer.name}</span
			>
			<span class="text-base-content">{benutzer.email}</span>
		</div>
	</a>
</aside>

<!--<header class="md:hidden flex flex-row justify-between items-center px-8 sticky top-0 z-50 h-20 bg-base-100 border-b border-b-base-300">
	<a href="/"
	><img
		src="/images/header/logo-big.png"
		class="w-36"
		alt="IBCornelsen - Logo"
	/></a
>
<div class="dropdown dropdown-end">
	<button tabindex="0" role="button">
		<svg width="25" height="25" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
	</button>
  <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
    <li><a class="text-base-content">Item 1</a></li>
    <li><a class="text-base-content">Item 2</a></li>
  </ul>
</div>
</header>-->

<style>
	@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

	:global(*) {
		font-family: Poppins !important;
	}

	.button-tab {
		@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
	}

	.button-tab:hover {
		@apply bg-base-200 outline-0;
	}

	.button-tab:focus {
		@apply shadow-none;
	}

	summary.button-tab::after {
		@apply ml-auto;
	}
</style>
