<script lang="ts">
	import { AufnahmeKomplettClient, BedarfsausweisWohnenClient, BenutzerClient, getAusweisartFromUUID, RechnungClient, VerbrauchsausweisGewerbeClient, 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 { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
	import { Enums, Objekt } from "#lib/client/prisma.js";
	import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016 } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016.js";
	import { shortenUID } from "#server/lib/hash.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
	export let aufnahme: AufnahmeKomplettClient;
	export let rechnung: RechnungClient;
	export let objekt: Objekt;
	export let benutzer: BenutzerClient;
	const progress = ausweis.ausgestellt ? 100 : ausweis.bestellt ? 66 : 33;

	const ausweisart = getAusweisartFromUUID(ausweis.uid);

	const id = shortenUID(ausweis.uid)

	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) {
			if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen) {
				await api["verbrauchsausweis-wohnen"]._uid.DELETE.fetch(undefined, {
					params: {
						uid: ausweis.uid,
					},
					headers: {
						Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
					},
				});
			} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
				await api["verbrauchsausweis-gewerbe"]._uid.DELETE.fetch(undefined, {
					params: {
						uid: ausweis.uid,
					},
					headers: {
						Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
					},
				});
			}

			ausweis.storniert
			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;

	let calculations = null;

	if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen) {
		calculations = endEnergieVerbrauchVerbrauchsausweis_2016(ausweis as VerbrauchsausweisWohnenClient, aufnahme, objekt);
	} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
		calculations = endEnergieVerbrauchVerbrauchsausweisGewerbe_2016(ausweis as VerbrauchsausweisGewerbeClient, aufnahme, objekt);
	}

</script>

<div class="relative bg-base-200 border border-base-300 rounded-lg p-4 mr-4">
	{#if ausweis.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 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 items-center gap-2">
			<div class="text-lg font-semibold">
				{#if ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen}
					Verbrauchsausweis Wohnen
				{:else if ausweisart == Enums.Ausweisart.BedarfsausweisWohnen}
						Bedarfsausweis Wohnen
				{:else if ausweisart == Enums.Ausweisart.VerbrauchsausweisGewerbe}
						Verbrauchsausweis Gewerbe
				{/if}

				{#if rechnung && rechnung.ausweistyp === Enums.AusweisTyp.Beratung}
					(Beratung)
				{:else if rechnung && rechnung.ausweistyp === Enums.AusweisTyp.Offline}
					(Offline)
				{/if}
			</div>

			{#if ausweis.ausgestellt}
				<span class="bg-green-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Ausgestellt</span>
			{:else if ausweis.bestellt}
				<span class="bg-primary px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Bestellt</span>
			{:else}
				<span class="bg-red-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Gespeichert</span>
			{/if}
		</div>
		<div class="badge badge-accent font-semibold text-black text-m">{objekt.adresse}</div>
		<div class="mb-4 flex flex-row items-center gap-4">
			<div class="w-full border rounded-lg my-2">
				<div class="bg-green-600 h-4 rounded-lg" class:bg-red-600={progress == 33} class:bg-primary={progress == 66} style="width: {progress}%;"></div>
			</div>
			<span class="text-sm font-semibold text-base-content"
				>{progress}%</span
			>
		</div>
		{#if ausweis.bestellt}
			{#if rechnung.ausweistyp === Enums.AusweisTyp.Beratung}
			<p class="text-sm font-semibold">Sie haben Hilfe zu diesem Ausweis angefordert. Sie werden innerhalb der nächsten 48 Stunden über die hinterlegte Telefonnummer vom IB Cornelsen kontaktiert.</p>
			{:else if rechnung.ausweistyp === Enums.AusweisTyp.Offline}
			<p class="text-sm font-semibold">Sie haben die offline Variant zu diesem Ausweis angefordert. Bitte übermitteln Sie uns die letzten drei Jahre der Energieabrechnungen Ihres Energieversorgers.</p>
			{:else}
			<p class="text-sm font-semibold">Der Ausweis wurde von Ihnen freigegeben und befindet sich in Prüfung vom IB Cornelsen</p>
			{/if}
		{/if}
		{#await calculations 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(aufnahme.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"
						>{aufnahme.baujahr_gebaeude[0] || "N/A"} /
						{aufnahme.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"
						>{aufnahme.flaeche
							? `${aufnahme.flaeche}m²`
							: "N/A"}</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>ID</span>
					<span class="font-bold text-base-content"
						>{id}</span
					>
				</div>
			</div>
		{/await}

		<div class="flex flex-row justify-end gap-4 mt-4">
			{#if !ausweis.storniert && !ausweis.ausgestellt}
				<!--
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
					>Stornieren</a>
				-->
			{/if}

			{#if ausweis.bestellt && (!rechnung || rechnung.bezahlmethode === Enums.Bezahlmethoden.rechnung)}
				<!-- <a href="/energieausweis-erstellen/bezahlung?uid={ausweis.uid}" class="button text-sm">Bezahlen</a> -->
			{/if}
			
			
			{#if !ausweis.ausgestellt && (!ausweis.bestellt || (rechnung.ausweistyp === Enums.AusweisTyp.Beratung || rechnung.ausweistyp === Enums.AusweisTyp.Offline))}
				<!-- TODO -->
				{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
					>Bearbeiten</a>
				{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?uid={ausweis.uid}"
					>Bearbeiten</a>
				{/if}
			{/if}

			{#if benutzer.rolle === Enums.BenutzerRolle.ADMIN}
				<!-- TODO -->
				{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
					>Formular</a>
				{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?uid={ausweis.uid}"
					>Formular</a>
				{/if}
			{/if}
			
			<a
				class="p-2 rounded-lg hover:bg-gray-200"
				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-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>
