<script lang="ts">
	import { AufnahmeKomplettClient, BenutzerClient } from "#components/Ausweis/types.js";
	import Carousel from "#components/Carousel.svelte";
	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
	import { Aufnahme, BedarfsausweisWohnen, Bild, Objekt, Rechnung, Unterlage, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
	import { CaretRight, ChevronLeft, ChevronRight, FileText } from "radix-svelte-icons";
	import CaretLeft from "radix-svelte-icons/src/lib/icons/CaretLeft.svelte";

	export let ausweis: (VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen) & {
		rechnung: Rechnung,
		aufnahme: Aufnahme & {
			bilder: Bild[],
			unterlagen: Unterlage[],
			objekt: Objekt
		}
	};
	export let benutzer: BenutzerClient;
	export let page: number;
	export let totalPageCount: number;

		
	let dropdownOpen = false;

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

<div class="justify-between items-center flex flex-row">
	<div class="text-2xl rounded-lg gap-2 bg-grey-200 text-center">
		ID: {ausweis.id}
	</div>
	<div class="text-2xl">{ausweis.aufnahme.objekt.adresse}, {ausweis.aufnahme.objekt.plz} {ausweis.aufnahme.objekt.ort}</div>
	<div class="relative">
		<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center" on:click={toggleDropdown}>
			Ausweis 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?aufnahme={ausweis.aufnahme.id}" 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?aufnahme={ausweis.aufnahme.id}" 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?aufnahme={ausweis.aufnahme.id}" 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}
	</div>	
</div>

<hr>

<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-2">

<div class="relative bg-gray-100 rounded-md flex justify-center items-center">
	{#if ausweis.aufnahme.bilder.length > 0}
	<Carousel perPage={1}>
		{#each ausweis.aufnahme.bilder as bild, i (i)}
			<img src="/bilder/{bild.id}.jpg" alt={bild.kategorie} loading="lazy" class="max-h-[15vh] h-full w-full object-contain">
		{/each}
		<span slot="left-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronLeft size={24}></ChevronLeft></span>
		<span slot="right-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronRight size={24}></ChevronRight></span>
	</Carousel>
	{/if}
</div>

<div class="flex items-center justify-between mx-80">
	{#if page > 1}
		<a class="p-2 rounded-lg hover:bg-gray-200 cursor-pointer" href="/dashboard/objekte?p={page - 1}">
			<CaretLeft size={34}></CaretLeft>
		</a>
	{:else}
		<div></div>
	{/if}
	<div class="text-lg">Ausweis {page} / {totalPageCount}</div>
	{#if totalPageCount > page}
		<a class="p-2 rounded-lg hover:bg-gray-200 cursor-pointer" href="/dashboard/objekte?p={page + 1}">
			<CaretRight size={34}></CaretRight>
		</a>
	{:else}
		<div></div>
	{/if}
</div>

</div>

<div class="mb-4 grid grid-cols-[1fr] md:grid-cols-[6fr,15fr,6fr] lg:grid-cols-[6fr,15fr,6fr] min-h-[550px]">
	<DashboardAusweis {benutzer} {ausweis} aufnahme={ausweis.aufnahme} objekt={ausweis.aufnahme.objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
</div>

<div class="fixed bottom-8 right-8 flex flex-col gap-4">
	<NotificationWrapper></NotificationWrapper>
</div>

<style>
	/* TODO: Das kann auch als Tailwind Klasse gemacht werden */
	.button {
		padding: 0.5rem 1rem;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
	}
</style>