<script lang="ts">
	import { AufnahmeKomplettClient, GEGNachweisWohnenClient, getAusweisartFromUUID } from "#components/Ausweis/types.js";
	import {
		CrossCircled,
		DotsVertical,
		Pencil2,
		QuestionMarkCircled,
	} from "radix-svelte-icons";
	import { Enums, Objekt } from "#lib/client/prisma.js";
	
	export let nachweis: GEGNachweisWohnenClient;
	export let aufnahme: AufnahmeKomplettClient;
	export let objekt: Objekt;

	const ausweisart = getAusweisartFromUUID(nachweis.uid);

	let hilfeModal: HTMLDialogElement;
</script>

<div class="relative bg-base-200 border border-base-300 rounded-lg p-4">
	{#if nachweis.storniert}
		<div
			class="absolute top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.7)] z-[5] rounded-lg select-none"
		>
			<h1
				class="absolute -rotate-[25deg] text-5xl md:text-7xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]"
			>
				Storniert
			</h1>
		</div>
	{/if}
	<div class="card-body">
		<div
			class="flex justify-end mb-2 dropdown dropdown-bottom absolute top-4 right-4"
		>
			<button class="rounded-full p-2.5 hover:bg-base-100">
				<DotsVertical size={15} />
			</button>
			<ul
				tabindex="-1"
				class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64 gap-2"
			>
				<li>
					<button><Pencil2 size={15} /> Als Vorlage benutzen</button>
				</li>
				<li>
					<button on:click={() => hilfeModal.showModal()}
						><QuestionMarkCircled size={15} /> Hilfe Erhalten</button
					>
				</li>
			</ul>
		</div>
		<div class="flex flex-row flex-wrap items-center gap-2">
			{#if ausweisart == Enums.Ausweisart.GEGNachweisWohnen}
				<div class="text-lg font-semibold">
					GEG Nachweis Wohnen
				</div>
			{:else if ausweisart == Enums.Ausweisart.GEGNachweisGewerbe}
				<div class="text-lg font-semibold">
					GEG Nachweis Gewerbe
				</div>
			{:else if ausweisart == Enums.Ausweisart.BedarfsausweisGewerbe}
				<div class="text-lg font-semibold">
					Bedarfsausweis Gewerbe
				</div>
			{/if}
		</div>
		<div class="badge badge-accent font-semibold text-black text-m">{objekt.adresse}</div>

		<div class="flex flex-row justify-end gap-4 mt-4">
		</div>
	</div>
</div>

<dialog bind:this={hilfeModal} class="modal">
	<div class="modal-box">
		<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
		<p>
			Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres
			Ausweises?
		</p>
		<p>
			In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf
			häufig gestellte Fragen.
		</p>
		<p>
			Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch
			unter <a href="tel:040-209-339-850">040 209 339 850</a> an oder
			<a href="mailto:info@online-energieausweis.com">schreiben sie uns eine email</a
			>.
		</p>
		<p>
			Wenn wir telefonisch nicht erreichbar sind, können sie uns auch
			direkt hier eine Nachricht hinterlassen.
		</p>
		<form class="my-4">
			<textarea
				class="textarea textarea-bordered"
				placeholder="Ihre Nachricht..."
				cols="10"
				rows="5"
			></textarea>
			<button class="btn btn-primary">Nachricht Abschicken</button>
		</form>
		<div class="modal-action">
			<form method="dialog">
				<button class="btn">Schließen</button>
			</form>
		</div>
	</div>
</dialog>
