<script lang="ts">
	import {
		Gear,
		LockClosed,
		CaretDown,
		MagnifyingGlass,
	} from "radix-svelte-icons";
	import { Benutzer, Enums } from "#lib/server/prisma.js";

	export let lightTheme: boolean;
	export let benutzer: Benutzer;
	export let besteller: Benutzer | null;

	let id: string;

	let dropdownOpen = false;

	function toggleDropdown() {
		dropdownOpen = !dropdownOpen;
	}
</script>

<aside class="rounded-lg bg-white box px-6 py-5">
	<div class="flex flex-row items-center">
		<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 class="button-tab" href="/dashboard">
			<Reader width={22} height={22} />
			Ausweise
		</a> -->

		<div class="flex flex-row gap-2 mb-2">
			<input type="text" bind:value={id} placeholder="ID">
			<button class="button" on:click={() => {
				window.location.href = `/dashboard/objekte/${id}`
			}}><MagnifyingGlass size={24}></MagnifyingGlass></button>
		</div>

		<div class="relative mb-4">
			<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center" on:click={toggleDropdown}>
				Energieausweis erstellen +
			</button>
			{#if dropdownOpen}
				<div class="absolute top-15 left-0 mt-2 w-50 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-[9999]" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
					<div class="py-1 w-full" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
						<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Wohnen Erstellen</a>
						<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Gewerbe Erstellen</a>
						<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis<br>Wohnen Erstellen</a>
					</div>
				</div>
			{/if}
			{#if benutzer.rolle === Enums.BenutzerRolle.RESELLER}
				<a href="/dashboard/abrechnung" class="button ">Monatliche Abrechnung</a>
			{/if}
		</div>
		
		<hr class="border-gray-600" />

		{#if besteller}
			Besteller

			<div class="flex flex-row mb-4">
				<div class="item-center mr-4">
					<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
				</div>
				<div>
					<div>
						{besteller.vorname} {besteller.name}
					</div>
					<div class="text-xs text-gray-500">
						Eigentümer oder im Auftrag
					</div>
					<div class="text-xs text-gray-500">
						<!-- Soll für den Aussteller sichtbar sein -->
						Tel. 1: {besteller.telefon}<br>
						<!-- Tel. 2: {rechnung.telefon} -->
					</div>
				</div>
			</div>
		<hr class="border-gray-600" />
		{/if}


		<!--
				Mitwirkende

				<div class="flex flex-row mb-1">
					<div class="item-center mr-4">
						<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
					</div>
					<div>
						<div>
							Ernie Energieberater
						</div>
						<div class="text-xs text-gray-500">
							Energieberater
						</div>
					</div>
				</div>

				<div class="flex flex-row mb-1">
					<div class="item-center mr-4">
						<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
					</div>
					<div>
						<div>
							Peter Planer
						</div>
						<div class="text-xs text-gray-500">
							Architekt
						</div>
					</div>
				</div>

				<div class="flex flex-row mb-1">
					<div class="item-center mr-4">
						<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
					</div>
					<div>
						<div>
							Hans Meier
						</div>
						<div class="text-xs text-gray-500">
							Eigentümer
						</div>
					</div>
				</div>

				<hr class="border-gray-600" />

				Experten in der Nähe

				<div class="flex flex-row mb-1">
					<div class="item-center mr-4">
						<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
					</div>
					<div>
						<div>
							Thorsten Maas
						</div>
						<div class="text-xs text-gray-500">
							Energieberater
						</div>
					</div>
				</div>

				<div class="flex flex-row mb-1">
					<div class="item-center mr-4">
						<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
					</div>
					<div>
						<div>
							Herbert Holm
						</div>
						<div class="text-xs text-gray-500">
							Gutachter
						</div>
					</div>
				</div>

				<hr class="border-gray-600" />

				<div class="flex justify-end mt-2 mb-2">
					<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center">
						Einladen
					</button>
				</div>
		-->

		{#if benutzer.rolle === "ADMIN"}
			<li>
				<details class="[&_.caret]:open:rotate-180" open>
					<summary
						class="button-tab w-full outline-0 hover:outline-0 cursor-pointer"
					>
						<LockClosed size={22}/>
						Admin <CaretDown
							size={24}
							class="caret ml-auto transition-transform"
						></CaretDown></summary
					>
					<ul>
						<li>
							<a
								class="button-tab"
								href="/dashboard/admin/impersonate-user"
							>
								Impersonate User
							</a>
						</li>
					</ul>
				</details>
			</li>
		{/if}
	</div>
	<div class="items-end bottom-4 right-4 z-50 mt-4">
		<div class="flex flex-row justify-end items-end">
			<a
				href="/dashboard/einstellungen"
				class="hover:bg-gray-200 p-3 rounded-lg"
			>
				<Gear size={24} />
			</a>
		</div>
	</div>
</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;
	}

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