<script lang="ts">
	import ZipSearch from "../components/PlzSuche.svelte";
	import Label from "../components/Label.svelte";
	import type {
		Bezahlmethoden,
	} from "#lib/client/prisma";
	import { Enums } from "#lib/client/prisma";
	import PaymentOption from "#components/PaymentOption.svelte";
	import CheckoutItem from "#components/CheckoutItem.svelte";
	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
	import { PRICES } from "#lib/constants.js";
	import { RechnungClient } from "#components/Ausweis/types.js";
	import { api } from "astro-typesafe-api/client";

	export let user: BenutzerClient;
	export let ausweis:
		| VerbrauchsausweisWohnenClient;
	// TODO: überarbeiten und zu inferProcedureOutput machen
	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: "Qualitätsdruck per Post (zusätzlich zur PDF Version) für 9€ inkl. MwSt.",
			id: Enums.Service.Qualitaetsdruck,
			price: 9,
			selected: false,
		},
		{
			name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben) für 10€ inkl. MwSt.",
			id: Enums.Service.Aushang,
			price: 10,
			selected: false,
		},
		{
			name: "Same Day Service (Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl. MwSt.",
			id: Enums.Service.SameDay,
			price: 29,
			selected: false,
		},
		{
			name: "Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.",
			id: Enums.Service.Telefonberatung,
			price: 75,
			selected: false,
		},
	];

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

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

		// TODO
		const response = await api.rechnung.PUT.fetch({
			...rechnung,
			ausweisart: Enums.Ausweisart.VerbrauchsausweisWohnen,
			ausweis_uid: ausweis.uid,
			bezahlmethode: aktiveBezahlmethode,
			services: services
				.filter((service) => service.selected)
				.map((service) => service.id),
		});

		if (aktiveBezahlmethode === Enums.Bezahlmethoden.rechnung) {
			window.location.href = `/payment/success?r=${response.uid}&a=${ausweis.uid}`
		} else {
			window.location.href = response.checkout_url as string;
		}
	}

	const priceTotal = services.reduce((acc, service) => {
		if (service.selected) {
			return acc + service.price;
		}
		return acc;
	}, 0) + PRICES[Enums.Ausweisart.VerbrauchsausweisWohnen][0];
</script>

<form class="grid grid-cols-[2fr_1fr] gap-4 h-full" on:submit={createPayment}>
	<div>
		<h3 class="font-semibold">Ansprechpartner</h3>
		<div class="rounded-lg border p-4 border-base-300 bg-base-100">
			<div class="grid grid-cols-3 gap-4">
				<!-- Anrede -->
				<div>
					<Label>Anrede *</Label>
					<div>
						<select name="anrede" bind:value={user.anrede}>
							<option>bitte auswählen</option>
							<option value="Herr">Herr</option>
							<option value="Frau">Frau</option>
						</select>
					</div>
				</div>

				<!-- Vorname -->
				<div>
					<Label>Vorname *</Label>
					<input
						name="vorname"
						type="text"
						bind:value={user.vorname}
						required
					/>
				</div>

				<!-- Nachname -->
				<div>
					<Label>Nachname *</Label>
					<input
						name="name"
						type="text"
						bind:value={user.name}
						required
					/>
				</div>
			</div>
			<div class="grid grid-cols-2 gap-4">
				<!-- Telefon -->
				<div>
					<Label>Telefon</Label>
					<input
						name="telefon"
						bind:value={user.telefon}
						type="text"
					/>
				</div>

				<!-- Email -->
				<div>
					<Label>E-Mail *</Label>
					<input
						name="email"
						type="email"
						bind:value={user.email}
						required
					/>
				</div>
			</div>
		</div>

		<h3 class="mt-8 font-semibold">Rechnungsadresse</h3>
		<div class="rounded-lg border p-4 border-base-300 bg-base-100">
			<div class="grid grid-cols-2 gap-4">
				<div>
					<Label>Empfänger *</Label>
					<input
						name="rechnung_empfaenger"
						type="text"
						bind:value={rechnung.empfaenger}
						required
						data-rule-maxlength="100"
						data-msg-maxlength="max. 100 Zeichen"
					/>
				</div>

				<!-- Zusatzzeile -->
				<div>
					<Label>Zusatzzeile</Label>
					<input
						name="rechnung_zusatzzeile"
						bind:value={rechnung.zusatzzeile}
						type="text"
						data-rule-maxlength="80"
						data-msg-maxlength="max. 80 Zeichen"
					/>
				</div>
			</div>
			<div class="grid grid-cols-3 gap-4">
				<!-- Strasse -->
				<div>
					<Label>Straße, Hausnummer *</Label>
					<input
						name="rechnung_strasse"
						bind:value={rechnung.strasse}
						type="text"
						required
						data-rule-maxlength="40"
						data-msg-maxlength="max. 40 Zeichen"
					/>
				</div>

				<!-- PLZ -->
				<ZipSearch
					name="rechnung_plz"
					bind:zip={rechnung.plz}
					bind:city={rechnung.ort}
				/>

				<!-- Ort -->
				<div>
					<Label>Ort *</Label>
					<input
						name="rechnung_ort"
						readonly
						type="text"
						required
						value={rechnung.ort}
					/>
				</div>
			</div>
			<div class="grid grid-cols-2 gap-4">
				<!-- Telefon -->
				<div>
					<Label>Telefon</Label>
					<input
						name="rechnung_telefon"
						bind:value={rechnung.telefon}
						type="text"
					/>
				</div>

				<!-- Email -->
				<div>
					<Label>E-Mail</Label>
					<input
						name="rechnung_email"
						bind:value={rechnung.email}
						type="email"
					/>
				</div>
			</div>
		</div>

		<h3 class="mt-8 font-semibold">Versandadresse</h3>
		<div class="rounded-lg border p-4 border-base-300 bg-base-100">
			<div class="flex flex-row gap-2 items-center">
				<input
					class="w-[15px] h-[15px]"
					type="checkbox"
					name="abweichende_versand_adresse"
					bind:checked={rechnung.abweichende_versand_adresse}
				/>
				<Label>Abweichende Versandadresse</Label>
			</div>
			<div class="grid grid-cols-2 gap-4">
				<!-- Empfänger -->
				<div>
					<Label>Empfänger *</Label>
					<input
						name="versand_empfaenger"
						type="text"
						readonly={!rechnung.abweichende_versand_adresse}
						bind:value={rechnung.versand_empfaenger}
						required
						data-rule-maxlength="100"
						data-msg-maxlength="max. 100 Zeichen"
					/>
				</div>

				<!-- Zusatzzeile -->
				<div>
					<Label>Zusatzzeile</Label>
					<input
						name="versand_zusatzzeile"
						type="text"
						readonly={!rechnung.abweichende_versand_adresse}
						bind:value={rechnung.versand_zusatzzeile}
						data-rule-maxlength="80"
						data-msg-maxlength="max. 80 Zeichen"
					/>
				</div>
			</div>
			<div class="grid grid-cols-3 gap-4">
				<!-- Strasse -->
				<div>
					<Label>Straße, Hausnummer *</Label>
					<input
						name="versand_strasse"
						type="text"
						readonly={!rechnung.abweichende_versand_adresse}
						bind:value={rechnung.versand_strasse}
						required
						data-rule-maxlength="40"
						data-msg-maxlength="max. 40 Zeichen"
					/>
				</div>

				<!-- PLZ -->
				<ZipSearch
					name="versand_plz"
					readonly={!rechnung.abweichende_versand_adresse}
					bind:zip={rechnung.versand_plz}
					bind:city={rechnung.versand_ort}
				/>

				<!-- Ort -->
				<div>
					<Label>Ort *</Label>
					<input
						name="versand_ort"
						type="text"
						readonly
						required
						bind:value={rechnung.versand_ort}
					/>
				</div>
			</div>
		</div>

		<h3 class="mt-8 font-semibold">Bezahlmethode</h3>
		<div
			class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-row gap-4 justify-between"
		>
			<PaymentOption
			bezahlmethode={Enums.Bezahlmethoden.paypal}
				bind:aktiveBezahlmethode
				name={"PayPal"}
				icon={"/images/paypal.png"}
			></PaymentOption>
			<PaymentOption
			bezahlmethode={Enums.Bezahlmethoden.sofort}
				bind:aktiveBezahlmethode
				name={"Sofort"}
				icon={"/images/sofort.png"}
			></PaymentOption>
			<PaymentOption
			bezahlmethode={Enums.Bezahlmethoden.giropay}
				bind:aktiveBezahlmethode
				name={"Giropay"}
				icon={"/images/giropay.png"}
			></PaymentOption>
			<PaymentOption
				bezahlmethode={Enums.Bezahlmethoden.creditcard}
				bind:aktiveBezahlmethode
				name={"Kreditkarte"}
				icon={"/images/mastercard.png"}
			></PaymentOption>
			<PaymentOption
			bezahlmethode={Enums.Bezahlmethoden.rechnung}
				bind:aktiveBezahlmethode
				name={"Rechnung"}
				icon={"/images/rechnung.png"}
			></PaymentOption>
		</div>
	</div>

	<div>
		<h3 class="font-semibold">Zusammenfassung</h3>
		<div class="rounded-lg border p-4 border-base-300 bg-base-100">
			<CheckoutItem
				image={"https://www.gih.de/wp-content/uploads/2015/11/EnergieausweisW-E.jpg"}
				name={"Energieausweis"}
				description={"Verbrauchsausweis Wohnen"}
				price={45}
				quantity={1}
				removable={false}
				maxQuantity={1}
			/>
			<div class="mt-auto">
				<hr />
				<div class="flex flex-row items-center justify-between">
					<span class="opacity-75 text-sm">Netto</span>
					<span class="font-semibold text-sm">{Math.round(priceTotal * 0.81 * 100) / 100}€</span>
				</div>
				<div class="flex flex-row items-center justify-between">
					<span class="opacity-75 text-sm">19% MwSt</span>
					<span class="font-semibold text-sm">{Math.round(priceTotal * 0.19 * 100) / 100}}€</span>
				</div>
				<hr />
				<div class="flex flex-row items-center justify-between">
					<span class="opacity-75 text-sm">Gesamt</span>
					<span class="font-semibold text-sm">{Math.round(priceTotal)}€</span>
				</div>
				<p class="mt-8">Mit dem Klick auf "Bestellung Bestätigen" akzeptieren sie unsere <a href="/agb">AGB</a> und <a href="/impressum">Datenschutzbestimmungen</a>. Sie werden zu ihrem ausgewählten Bezahlprovider weitergeleitet, nach Bezahlung werden sie automatisch zu unserem Portal zurückgeleitet.</p>
				<button class="btn btn-secondary w-full mt-4"
					>Bestellung Bestätigen</button
				>
			</div>
		</div>
	</div>
</form>
