<script lang="ts">
	import HelpLabel from "#components/HelpLabel.svelte";
	import ZipSearch from "../components/PlzSuche.svelte";
	import Label from "../components/Label.svelte";
	import type {
		BedarfsausweisWohnen,
		Benutzer,
		Bezahlmethoden,
		VerbrauchsausweisGewerbe,
		VerbrauchsausweisWohnen,
	} from "@ibcornelsen/database/client";
	import { Enums } from "@ibcornelsen/database/client";
	import PaymentOption from "#components/PaymentOption.svelte";
	import { client } from "src/trpc";
	import type { inferProcedureInput } from "@trpc/server";
	import type { AppRouter } from "@ibcornelsen/api";
	import CheckoutItem from "#components/CheckoutItem.svelte";

	export let user: Benutzer;
	export let ausweis:
		| VerbrauchsausweisWohnen
		| BedarfsausweisWohnen
		| VerbrauchsausweisGewerbe;
	let rechnung: inferProcedureInput<
		AppRouter["v1"]["rechnungen"]["erstellen"]
	> = {};

	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 selectedPaymentType: Bezahlmethoden =
		Enums.Bezahlmethoden.PAYPAL;

	let agbAkzeptiert: boolean;
	let datenschutzAkzeptiert: boolean;

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

		const response = await client.v1.rechnungen.erstellen.mutate({
			...rechnung,
			ausweisart: ausweis.ausweisart,
			uid: ausweis.uid,
			bezahlmethode: selectedPaymentType,
			services: services
				.filter((service) => service.selected)
				.map((service) => service.id),
		});

		window.location.href = response.checkout_url;
	}
</script>

<div class="grid grid-cols-[2fr_1fr] gap-4 h-full">
	<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
				paymentType={Enums.Bezahlmethoden.paypal}
				bind:selectedPaymentType
				name={"PayPal"}
				icon={"/images/paypal.png"}
			></PaymentOption>
			<PaymentOption
				paymentType={Enums.Bezahlmethoden.sofort}
				bind:selectedPaymentType
				name={"Sofort"}
				icon={"/images/sofort.png"}
			></PaymentOption>
			<PaymentOption
				paymentType={Enums.Bezahlmethoden.giropay}
				bind:selectedPaymentType
				name={"Giropay"}
				icon={"/images/giropay.png"}
			></PaymentOption>
			<PaymentOption
				paymentType={Enums.Bezahlmethoden.creditcard}
				bind:selectedPaymentType
				name={"Kreditkarte"}
				icon={"/images/mastercard.png"}
			></PaymentOption>
			<PaymentOption
				paymentType={Enums.Bezahlmethoden.rechnung}
				bind:selectedPaymentType
				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">Brutto</span>
					<span class="font-semibold text-sm">75$</span>
				</div>
				<div class="flex flex-row items-center justify-between">
					<span class="opacity-75 text-sm">Netto</span>
					<span class="font-semibold text-sm">75$</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">75$</span>
				</div>
				<button class="btn btn-secondary w-full mt-4" disabled
					>Bestellung Bestätigen</button
				>
			</div>
		</div>
	</div>
</div>
