<script lang="ts">
	import { ripple } from "svelte-ripple-action";
	import type { RippleOptions } from "svelte-ripple-action/dist/constants.js";
	import { Reader, Bell, Gear, LockClosed, CaretDown } from "radix-svelte-icons"
	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
	import DashboardNotification from "./DashboardNotification.svelte";
	import { notifications } from "#components/NotificationProvider/shared.js";
	import ThemeController from "#components/ThemeController.svelte";
	import { BenutzerClient } from "#components/Ausweis/types.js";
	
	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>

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

		<div class="flex-col items-end">
			<div class="text-base-content font-semibold text-left flex"
				>{benutzer.vorname} {benutzer.name}</div>
			<div class="text-base-content text-sm flex">{benutzer.email}</div>
			<a href="/auth/logout" class="text-xs">Logout</a>
		</div>

	</div>

	<div class="flex flex-col gap-2 mt-0 md:mt-8 px-0">
		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
			<Reader width={22} height={22} />
			Gebäude
		</a>
	<div class="flex ml-12">Katendeich 5AAA<br>44145 Dortmund</div>
	<hr class="border-gray-600">
	<div class="flex ml-12">Birkenalee<br>33175 Bad Lippspringe</div>
	<hr class="border-gray-600">
	<div class="flex ml-12">Birkenalee<br>33175 Bad Lippspringe</div>
	<hr class="border-gray-600">
	<div class="flex ml-12">Katendeich 5AAA<br>44145 Dortmund</div>
	<hr class="border-gray-600">
	<div class="flex ml-12">Katendeich 5AAA<br>44145 Dortmund</div>
		<!-- <button use:ripple={rippleOptions} class="button-tab">
			<EnvelopeClosed width={22} height={22} />
			Kontakt
		</button>
		<li><details class="[&_.caret]:open:rotate-180">
			<summary class="button-tab w-full outline-0 hover:outline-0">
				<Cube width={22} height={22} />
			Services <CaretDown size={24} class="caret ml-auto transition-transform"></CaretDown></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 class="[&_.caret]:open:rotate-180">
			<summary class="button-tab w-full outline-0 hover:outline-0 cursor-pointer">
				<LockClosed width={22} height={22} />
			Admin <CaretDown size={24} class="caret ml-auto transition-transform"></CaretDown></summary>
			<ul>
				<li>
					<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/ausweise-pruefen">
						Ausweise Prüfen
					</a>
				</li>
			</ul>
		</details></li>
		{/if}
	</div>
	<div class="mt-10 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="hover:bg-gray-200 p-3 rounded-lg">
						<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="hover:bg-gray-200 p-3 rounded-lg"
			>
				<Gear size={24} />
			</a>
		</div>
	</div>
	<div class="divider px-8"></div>
	<a
		href="/dashboard/einstellungen"
		use:ripple={rippleOptions}
		class="hover:bg-gray-200 no-animation focus:shadow-none justify-start py-4 h-auto px-8 rounded-none w-full flex flex-row gap-4"
	>
		
	</a>
</aside>

<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-gray-200 outline-0;
	}

	li {
		@apply list-none;
	}

	.button-tab {
		@apply flex flex-row gap-4 py-2.5 px-4 cursor-pointer items-center;
	}

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

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