<script lang="ts">
	import {
	VerbrauchsausweisWohnenClient,
	} from "#components/Ausweis/types.js";
	import moment from "moment";
	import { dialogs } from "svelte-dialogs";
	import {
		CrossCircled,
		DotsVertical,
		Download,
		Pencil2,
		QuestionMarkCircled,
	} from "radix-svelte-icons";
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
	import { client } from "src/trpc.js";
		
	export let ausweis: VerbrauchsausweisWohnenClient;
	export let progress: number;

	async function ausweisStornieren() {
		const result = await dialogs.confirm({
			title: "Ausweis Stornieren",
			text: "Sind sie sich sicher, dass sie den Ausweis stornieren möchten? Diese Operation kann nicht rückgängig gemacht werden!",
			confirmButtonText: "Ausweis Stornieren",
			confirmButtonClass: "btn btn-primary",
			declineButtonClass: "btn btn-bordered",
			declineButtonText: "Abbrechen",
			dialogClass: "modal-box",
			headerClass: "bg-base-100 text-center",
			titleClass: "text-base-content text-xl font-medium",
			dividerClass: "hidden",
			footerClass: "bg-base-100 justify-center gap-4 mt-4",
		});

		if (result === true) {
			await client.v1.verbrauchsausweisWohnen.stornieren.mutate({
				uid: ausweis.uid
			})

			ausweis.gebaeude_aufnahme_allgemein.storniert = true;
			ausweis = ausweis;

			dialogs.alert({
				title: "Ausweis Storniert",
				text: "Der Ausweis wurde erfolgreich storniert.",
				dismissButtonText: "Schließen",
				dismissButtonClass: "btn btn-primary",
				dialogClass: "modal-box",
				headerClass: "bg-base-100 text-center",
				titleClass: "text-base-content text-xl font-medium",
				dividerClass: "hidden",
				footerClass: "bg-base-100 justify-center gap-4 mt-4",
			});
		}
	}

	let hilfeModal: HTMLDialogElement;
</script>

<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
	{#if ausweis.gebaeude_aufnahme_allgemein.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}
	<figure class="lg:w-1/2">
		<img
			src={(ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten.gebaeude_bilder && `/bilder/${ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten.gebaeude_bilder[0]?.uid}.webp`) || "/images/placeholder.jpg"}
			class="object-cover w-full h-full"
			alt="Gebäudebild"
		/>
	</figure>
	<div class="card-body lg:w-1/2">
		<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 on:click={ausweisStornieren}
						><CrossCircled size={15} />Ausweis Stornieren</button
					>
				</li>
				<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 gap-2">
			{#if ausweis.gebaeude_aufnahme_allgemein.ausweisart == "VerbrauchsausweisWohnen"}
			<div class="badge badge-accent font-semibold">
				Verbrauchsausweis Wohnen
			</div>
			{:else if ausweis.gebaeude_aufnahme_allgemein.ausweisart == "BedarfsausweisWohnen"}
			<div class="badge badge-accent font-semibold">
				Bedarfsausweis Wohnen
			</div>
			{:else if ausweis.gebaeude_aufnahme_allgemein.ausweisart == "VerbrauchsausweisGewerbe"}
			<div class="badge badge-accent font-semibold">
				Verbrauchsausweis Gewerbe
			</div>
			{/if}

			{#if ausweis.erledigt}
			<div class="badge badge-success font-semibold">Ausgestellt</div>
			{/if}
		</div>
		<h2 class="card-title">{ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten.adresse}</h2>
		<div class="mb-4 flex flex-row items-center gap-4">
			<progress class="progress w-full" value={progress} max="100"></progress>
			<!-- TODO: Metrics für den Fortschritt festlegen -->
			<span class="text-sm font-semibold text-base-content">{progress}%</span>
		</div>
		{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis)}

		{:then calculations}
		<div class="flex flex-col gap-2">
			<div class="flex flex-row justify-between">
				<span>Energieverbrauch</span>
				<span class="font-bold text-base-content">{calculations?.endEnergieVerbrauchGesamt}kWh/A</span>
			</div>
			<div class="flex flex-row justify-between">
				<span>CO2 Ausstoß</span>
				<span class="font-bold text-base-content">{calculations?.co2EmissionenGesamt}Kg/A</span>
			</div>
			<div class="flex flex-row justify-between">
				<span>Erstellungsdatum</span>
				<span class="font-bold text-base-content"
					>{moment(ausweis.erstellungsdatum).format(
						"DD.MM.YYYY"
					)}</span
				>
			</div>
			<div class="flex flex-row justify-between">
				<span>Baujahr</span>
				<span
					class="font-bold text-base-content"
					title="Gebäude / Heizung"
					>{ausweis.gebaeude_aufnahme_allgemein.baujahr_gebaeude[0] || "N/A"} /
					{ausweis.gebaeude_aufnahme_allgemein.baujahr_heizung[0] ||
						"N/A"}</span
				>
			</div>
			<div class="flex flex-row justify-between">
				<span>Wohnfläche</span>
				<span class="font-bold text-base-content"
					>{ausweis.gebaeude_aufnahme_allgemein.flaeche
						? `${ausweis.gebaeude_aufnahme_allgemein.flaeche}m²`
						: "N/A"}</span
				>
			</div>
			<div class="flex flex-row justify-between">
				<span>ID</span>
				<span class="font-bold text-base-content"
					>{ausweis.uid.split("-")[0]}</span
				>
			</div>
		</div>
		{/await}
		<div class="card-actions justify-end mt-8">
			<a class="btn btn-primary" href="/energieausweis-erstellen/verbrauchsausweis-wohnen?uid={ausweis.uid}">Bearbeiten</a>
			<a class="btn btn-ghost" title="PDF Herunterladen" target="_blank" href="/pdf/ansichtsausweis?uid={ausweis.uid}">
				<Download size={22} />
			</a>
		</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-220-31-87">040 220 31 87</a> an oder
			<a href="mailto:moritz.utcke@gmx.de">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>
