<script lang="ts">
	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
	import Progressbar from "#components/Ausweis/Progressbar.svelte";
	import Bereich from "#components/labels/Bereich.svelte";
	import Ansprechpartner from "#components/Ausweis/Ansprechpartner.svelte";
	import Rechnungsadresse from "#components/Ausweis/Rechnungsadresse.svelte";
	import Bezahlung from "#components/Ausweis/Bezahlung.svelte";

	import Pruefung from "#components/Ausweis/Pruefung.svelte";

	import type { Bezahlmethoden } from "@ibcornelsen/database/client";
	import { Enums } from "@ibcornelsen/database/client";
	import { dialogs } from "svelte-dialogs";
	import LoginDialog from "#components/LoginDialog.svelte";
	import { API_ACCESS_TOKEN_COOKIE_NAME, PRICES } from "#lib/constants.js";
	import Cookies from "js-cookie";
	import {
		AufnahmeClient,
		BenutzerClient,
		getAusweisartFromUUID,
		ObjektClient,
		RechnungClient,
		VerbrauchsausweisWohnenClient,
	} from "#components/Ausweis/types.js";
	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
	import { api } from "astro-typesafe-api/client";
	import A10WaermequellenAnlagentechnikTrinkwarmwasser from "#components/Tabellen/A10WaermequellenAnlagentechnikTrinkwarmwasser.svelte";

	export let user: BenutzerClient;
	export let ausweis: VerbrauchsausweisWohnenClient;
	export let aufnahme: AufnahmeClient;
	export let objekt: ObjektClient;
	export let ausweisart: Enums.Ausweisart;

	let rechnung: Partial<RechnungClient> = {
		email: user.email,
		empfaenger: user.vorname + " " + user.name,
		strasse: user.adresse,
		plz: user.plz,
		ort: user.ort,
		versand_empfaenger: user.vorname + " " + user.name,
		versand_strasse: user.adresse,
		versand_plz: user.plz,
		versand_ort: user.ort,
		telefon: user.telefon,
	}

	let services: { name: string, id: Enums.Service, price: number, selected: boolean }[] = [
		{
			name: "Qualitätsdruck per Post (zusätzlich zur PDF Version)",
			id: Enums.Service.Qualitaetsdruck,
			price: 9,
			selected: false,
		},
		{
			name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)",
			id: Enums.Service.Aushang,
			price: 10,
			selected: false,
		},
		{
			name: "Same Day Service - Bestellung Werktags vor <b>12:00 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
			id: Enums.Service.SameDay,
			price: 29,
			selected: false,
		},
		{
			name: "Telefonische Energieeffizienzberatung",
			id: Enums.Service.Telefonberatung,
			price: 75,
			selected: false,
		},
	];

	export let bezahlmethode: Bezahlmethoden =
		Enums.Bezahlmethoden.paypal;

	let prices: number[] = [];

	if (aufnahme.ausweisart) {
		prices = PRICES[aufnahme.ausweisart];
	}

	let basePrice: number = prices[0];

	$: price =
		basePrice +
		services.reduce(
			(acc, service) => (service.selected && acc + service.price) || acc,
			0
		);

	const zurueck = {
		[Enums.Ausweisart.VerbrauchsausweisWohnen]: `/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid=${ausweis.uid}`,
		[Enums.Ausweisart.VerbrauchsausweisGewerbe]: `/energieausweis-erstellen/verbrauchsausweis-gewerbe?uid=${ausweis.uid}`,
		[Enums.Ausweisart.BedarfsausweisWohnen]: `/energieausweis-erstellen/bedarfsausweis-wohnen?uid=${ausweis.uid}`,
		[Enums.Ausweisart.BedarfsausweisGewerbe]: `/energieausweis-erstellen/bedarfsausweis-gewerbe?uid=${ausweis.uid}`,
	}[ausweisart]

	async function speichern(e: SubmitEvent) {
		e.preventDefault();

		// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
		// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
		if (!(await validateAccessTokenClient())) {
			// TOOD: Auf Dialog umstellen.
			const loggedIn = await dialogs.modal(LoginDialog);

			if (!loggedIn) {
				return false;
			}
		}

		// Falls der Ausweis noch keine benutzer_id hat müssen wir ihn claimen, damit er dem jetzigen Nutzer zugewiesen wird...
		// await client.v1.verbrauchsausweisWohnen.claim.mutate({
		// 	uid: ausweis.uid,
		// });

		window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
	}

	async function bestellen() {
		const ausweisart = getAusweisartFromUUID(ausweis.uid) as Enums.Ausweisart;
		
		try {
			const { uid, checkout_url } = await api.rechnung.PUT.fetch({
				ausweisart,
				bezahlmethode,
				services: services.filter(service => service.selected).map(service => service.id),
				email: rechnung.email,
				empfaenger: rechnung.empfaenger,
				strasse: rechnung.strasse,
				plz: rechnung.plz,
				ort: rechnung.ort,
				versand_empfaenger: rechnung.versand_empfaenger,
				versand_strasse: rechnung.versand_strasse,
				versand_plz: rechnung.versand_plz,
				versand_ort: rechnung.versand_ort,
				telefon: rechnung.telefon,
				ausweis_uid: ausweis.uid
			}, {
				headers: {
					Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
				}
			})

			window.location.href = checkout_url;
		} catch(e) {
			console.log(e);
			
		}
	}
</script>

<div
	id="skala"
	class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4

2xl:grid-cols-2 2xl:gap-x-8
"
>
<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
	<PerformanceScore
		bind:ausweis
		bind:aufnahme={aufnahme}
		bind:objekt={objekt}
		{ausweisart}
	/>
</div>

	<div
		id="progress-box"
		class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
	>
		<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
		<h2 class="text-primary text-xl">
			Verbrauchsausweis Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €
		</h2>
		<Progressbar progress={0} step1={''} step2={'step'} step3={''}/>
	</div>
</div>

<div id="formInput-2">
	<div id="formular-box" class="formular-boxen ring-0">
		<Bereich
			bereich="1"
			title="Eingabe des Ansprechpartners -> {user.email}"
		>
			<Ansprechpartner bind:user /></Bereich
		>

		<Bereich bereich="2" title="Rechnungsadresse">
			<Rechnungsadresse bind:user bind:rechnung /></Bereich
		>

		<Bereich bereich="3" title="Bezahlmethode">
			<Bezahlung bind:selectedPaymentType={bezahlmethode} /></Bereich
		>

		<div class="grid grid-cols-2 gap-x-6 my-6">
			<div class="zusaetze bereich-box bg-white">
				<h3>Zusatzleistungen:</h3>

				{#each services as service}
					<div class="zusatz">
						<input
							type="checkbox"
							bind:checked={service.selected}
						/>
						<div class="text-right pr-6">
							<b>{@html service.price} €</b> inkl. Mwst
						</div>
						<div>{@html service.name}</div>
					</div>
				{/each}
			</div>

			<div class=" bereich-box bg-white ring-primary/50 ring-2">
				<h3>Kosten:</h3>

				<div class="ProduktKostenTabelle">
					<div class="zeile betrag">
						<div>Netto-Preis Energieausweis</div>
						<div>:</div>
						<div class="text-right">
							<b>{(price * 0.81).toFixed(2) + " €"}</b>
						</div>
					</div>

					<div class="zeile betrag">
						<div>Zusatzleistung (Prüfung Mehraufwand)</div>
						<div>:</div>
						<div class="text-right"><b>0.00 €</b></div>
					</div>

					<div class="zeile betrag">
						<div>19% gesetzl. MwSt.</div>
						<div>:</div>
						<div class="text-right">
							<b>{(price * 0.19).toFixed(2) + " €"}</b>
						</div>
					</div>
					<div class="zeile betrag mt-4">
						<div><b>Preis inkl. MwSt.</b></div>
						<div>:</div>
						<div class="text-right">
							<b>{price.toFixed(2) + " €"}</b>
						</div>
					</div>
					<div class="zeile betrag mt-4 items-center">
						<div><b>Bezahlmethode</b></div>
						<div>:</div>
						<div class="justify-self-end">
							<img
								src="images/{bezahlmethode}.png"
								alt={bezahlmethode}
							/>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div
			class="w-full grid grid-cols-[min-content_1fr_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
		>
			<a class="button justify-self-start" href={zurueck}>Zurück</a>

			<div></div>

			<button class="button">Speichern</button>

			<button class="button" data-cy="bestellen" on:click={bestellen}>kostenpflichtig bestellen</button>
		</div>
	</div>
</div>

 <!--
		<div class="bereich-box pr-12 mt-6">
			<Pruefung
				bereich="A"
				title="Prüfung der Ausweisart"
				bullets={[
					["Vermietung, Verkauf oder sonstiges.", false],
					[
						"Baujahr Heizung nicht kleiner als Baujahr Gebäude.",
						false,
					],
					[
						"Baujahr nach 1977 oder saniert oder mehr als 4 Wohneinheiten",
						false,
					],
					["Heizung min. 3 Jahre alt.", false],
					["Verbrauchsausweis zulässig.", false],
				]}
			></Pruefung>

			<Pruefung
				bereich="B"
				title="Prüfung der Adresse, Wohnfläche, Keller und Dach"
				bullets={[
					["PLZ gültig.", false],
					["Klimafaktorern.", false],
					["Wohnfläche passt zu Wohneinheiten", false],
				]}
			></Pruefung>

			<Pruefung
				bereich="C"
				title="Prüfung der Verbrauchsangaben"
				bullets={[
					["Verbrauchsmenge schlüssig.", false],
					["Verbrauchsabweichung im Rahmen.", false],
					["Endenergieverbrauch schlüssig", false],
				]}
			></Pruefung>

			<Pruefung
				bereich="D"
				title="Prüfung Warmwasser und alternative Energieversorgung"
				bullets={[
					["Warmwasseranteil schlüssig.", false],
					["Verbrauchsabweichung im Rahmen.", false],
					["Endenergieverbrauch schlüssig", false],
				]}
			></Pruefung>

			<Pruefung
				bereich="E"
				title="Prüfung von Gebäudetyp, Lüftung, Kühlung und Leerstand"
				bullets={[["Leerstand nicht größer als 30%.", false]]}
			></Pruefung>

			<Pruefung
				bereich="F"
				title="Prüfung des Sanierungsstandes und der Gebäudebilder"
				bullets={[
					["Mindestens ein Bild pro Abschnitt vorhanden.", false],
					["Angaben zum Sanierungsstand vorhanden.", false],
					[
						"Bei Baujahr vor 1978 Dach oder Geschossdecke min. 12 cm gedämmt.",
						false,
					],
				]}
			></Pruefung>
		</div>
	</div>

	<div class="varianten bereich-box bg-white">
		<h3>Hiermit bestelle ich folgende Version des Energieausweises:</h3>

		<div class="variante">
			<input
				type="radio"
				bind:group={basePrice}
				value={prices[0]}
				name="Preis"
				checked
			/>
			<div class="text-right pr-4"><b>{prices[0]} €</b> inkl. MwSt.</div>
			<div>Verbrauchsausweis online als PDF per E-Mail</div>
		</div>

		<div class="variante">
			<input
				type="radio"
				bind:group={basePrice}
				value={prices[1]}
				name="Preis"
			/>
			<div class="text-right pr-4"><b>{prices[1]} €</b> inkl. MwSt.</div>
			<div>
				Verbrauchsausweis online inkl. Beratung als PDF per E-Mail
			</div>
		</div>

		<div class="variante">
			<input
				type="radio"
				bind:group={basePrice}
				value={prices[2]}
				name="Preis"
			/>
			<div class="text-right pr-4"><b>{prices[2]} €</b> inkl. MwSt.</div>
			<div>
				Verbrauchsausweis offline als PDF per E-Mail (Sie schicken uns 3
				Verbrauchsabrechnungen)
			</div>
		</div>
	</div>

	<div class="zusaetze bereich-box bg-white">
		<h3>Zusatzleistungen</h3>

		{#each services as service}
			<div class="zusatz">
				<input type="checkbox" bind:checked={service.selected} />
				<div class="text-right pr-6">
					<b>{@html service.price} €</b> inkl. Mwst
				</div>
				<div>{@html service.name}</div>
			</div>
		{/each}
	</div>
<ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->

	<!-- <ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->


<style lang="postcss">
	h3 {
		@apply text-[1.25rem] ml-0 font-bold mb-6;
	}

	.ProduktKostenTabelle {
		@apply block;
		.zeile {
			@apply grid grid-cols-[19rem_1rem_5rem_1fr];
		}
		.betrag {
			@apply font-bold text-[1.15rem];
		}
	}

	.varianten {
		@apply block;
		.variante {
			@apply grid grid-cols-[40px_8rem_1fr] items-start pb-4;
			input {
				@apply mt-[5px];
			}
		}
	}

	.zusaetze {
		@apply block;
		.zusatz {
			@apply grid grid-cols-[40px_8rem_1fr] items-start pb-3;
			input {
				@apply mt-[4px];
			}
		}
	}
</style>
