<script lang="ts">
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import {
		VerbrauchsausweisWohnenClient,
		ObjektClient,
		AufnahmeClient,
		BenutzerClient,
		UploadedGebaeudeBild,
		UnterlageClient,
		BedarfsausweisWohnenClient,
		VerbrauchsausweisGewerbeClient,
	} from "#components/Ausweis/types.js";
	import Bereich from "#components/labels/Bereich.svelte";
	import { Enums } from "@ibcornelsen/database/client";
	import InputLabel from "#components/labels/InputLabel.svelte";
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Progressbar from "#components/Ausweis/Progressbar.svelte";
	import FileGrid from "#components/FileGrid.svelte";
	import Hilfe from "#components/Ausweis/Hilfe.svelte";
	import Overlay from "#components/Overlay.svelte";
	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
	import { validateAccessTokenClient } from "#client/lib/validateAccessToken.js";
	import { api } from "astro-typesafe-api/client";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
	import { exclude } from "#lib/exclude.js";
	import Cookies from "js-cookie";

	export async function ausweisSpeichern(
	ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient,
	objekt: ObjektClient,
	aufnahme: AufnahmeClient,
	unterlagen: (UnterlageClient & { data?: string })[],
	ausweisart: Enums.Ausweisart
) {
	if (objekt.uid) {
		await api.objekt._uid.PATCH.fetch({
			...exclude(objekt, ["uid"])
		}, {
			params: {
				uid: objekt.uid
			},
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})
} else {
		const { uid } = await api.objekt.PUT.fetch({
			...exclude(objekt, ["uid"])
		}, {
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		objekt.uid = uid;
	}



	if (aufnahme.uid) {
		await api.aufnahme._uid.PATCH.fetch({
			...exclude({...aufnahme, baujahr_klima: []}, ["uid"])
		}, {
			params: {
				uid: aufnahme.uid
			},
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})
	} else {
		const { uid } = await api.aufnahme.PUT.fetch({
			aufnahme: {...aufnahme, baujahr_klima: []},
			uid_objekt: objekt.uid
		}, {
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		aufnahme.uid = uid
	}

	let patchRoute: any;
	let putRoute: any;
	if (ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen) {
		patchRoute = api["verbrauchsausweis-wohnen"]._uid.PATCH
		putRoute = api["verbrauchsausweis-wohnen"].PUT
	} else if (ausweisart == Enums.Ausweisart.VerbrauchsausweisGewerbe) {
		patchRoute = api["verbrauchsausweis-gewerbe"]._uid.PATCH
		putRoute = api["verbrauchsausweis-gewerbe"].PUT
	} else if (ausweisart == Enums.Ausweisart.BedarfsausweisWohnen) {
		patchRoute = api["bedarfsausweis-wohnen"]._uid.PATCH
		putRoute = api["bedarfsausweis-wohnen"].PUT
	} else if (ausweisart == Enums.Ausweisart.GEGNachweisVerbrauchsausweisWohnen) {
		patchRoute = api["geg-nachweis-verbrauchsausweis-wohnen"]._uid.PATCH
		putRoute = api["geg-nachweis-verbrauchsausweis-wohnen"].PUT
	}

	if (ausweis.uid) {
		await patchRoute.fetch({
			...exclude(ausweis, ["uid"])
		}, {
			params: {
				uid: ausweis.uid
			},
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})
	} else {
		const { uid } = await putRoute.fetch({
			ausweis,
			uid_aufnahme: aufnahme.uid
		}, {
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		ausweis.uid = uid;
	}

	for (const unterlage of unterlagen) {
		if (unterlage.uid || !unterlage.data) {
			continue;
		}

		const response = await api.objekt._uid.unterlagen.PUT.fetch({
			data: unterlage.data,
			kategorie: unterlage.kategorie,
			mime: unterlage.mime,
			name: unterlage.name
		}, {
			params: {
				uid: objekt.uid
			},
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		unterlage.uid = response.uid
	}

	return {
		uid_ausweis: ausweis.uid,
		uid_aufnahme: aufnahme.uid,
		uid_objekt: objekt.uid
	}
}


	async function ausweisAbschicken() {
		if (!(await validateAccessTokenClient())) {
			loginOverlayHidden = false;
			return;
		}

		const result = await ausweisSpeichern(ausweis, objekt, aufnahme, unterlagen, Enums.Ausweisart.GEGNachweisVerbrauchsausweisWohnen)

		if (result !== null) {
			window.history.pushState(
				{},
				"",
				`${location.pathname}?uid=${result.uid_ausweis}`
			);
			window.location.href = `/kundendaten?uid=${result.uid_ausweis}`;
		}

		loginOverlayHidden = true;
	}

	async function spaeterWeitermachen() {
		if (!(await validateAccessTokenClient())) {
			loginOverlayHidden = false;
			return;
		}

		loginOverlayHidden = true;
	}

	let loginOverlayHidden = true;

	export let ausweis: VerbrauchsausweisWohnenClient;
	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let user: BenutzerClient = {} as BenutzerClient;
	export let bilder: UploadedGebaeudeBild[] = [];
	export let plaene: (UnterlageClient & { data: string })[] =
		[];
	export let unterlagen: (UnterlageClient & {
		data: string;
	})[] = [];


	if (Object.keys(ausweis).length === 0) {
		const localStorageAusweis = localStorage.getItem("ausweis");
		if (localStorageAusweis) {
			ausweis = JSON.parse(localStorageAusweis)
		}
	}

	if (Object.keys(aufnahme).length === 0) {
		const localStorageAufnahme = localStorage.getItem("aufnahme");
		if (localStorageAufnahme) {
			aufnahme = JSON.parse(localStorageAufnahme)
		}
	}

	if (Object.keys(objekt).length === 0) {
		const localStorageObjekt = localStorage.getItem("objekt");
		if (localStorageObjekt) {
			objekt = JSON.parse(localStorageObjekt)
		}
	}


	$: {
		if (ausweis.uid && objekt.uid && aufnahme.uid) {
			localStorage.setItem(ausweis.uid, JSON.stringify(ausweis))
			localStorage.setItem(objekt.uid, JSON.stringify(objekt))
			localStorage.setItem(aufnahme.uid, JSON.stringify(aufnahme))
		} else {
			localStorage.setItem("ausweis", JSON.stringify(ausweis))
			localStorage.setItem("aufnahme", JSON.stringify(aufnahme))
			localStorage.setItem("objekt", JSON.stringify(objekt))
		}
	}

	const ausweisart = Enums.Ausweisart.GEGNachweisVerbrauchsausweisWohnen;

	function automatischAusfüllen() {}
</script>

<div
	id="skala"
	class="bg-white grid grid-cols-1 p-4 lg:grid-cols-2 lg:gap-x-6 no-scroll"
>
	<div
		id="progress-box"
		class="w-full box relative px-4 py-3 text-center order-2 self-stretch"
	>
		<h1 class="text-secondary text-3xl m-0">GEG Nachweis Anfragen</h1>
		<h2 class="text-primary text-xl">Verbrauchsausweis Wohnen</h2>
		<Progressbar
			active={0}
			steps={["Gebäudedaten", "Kundendaten", "Bestätigung"]}
		/>
	</div>
</div>

<form
	id="formInput-1"
	on:submit={ausweisAbschicken}
	name="ausweis"
	data-test="ausweis"
>
	<div id="formular-box" class="formular-boxen ring-0">
		<!-- A Prüfung der Ausweisart -->

		<Bereich bereich="A" title="Prüfung der Ausweisart">
			<Ausweisart bind:objekt bind:aufnahme bind:ausweis {ausweisart} />
		</Bereich>

		<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->

		<Bereich
			bereich="B"
			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
			><GebaeudeDaten bind:aufnahme bind:objekt {ausweisart} /></Bereich
		>

		<Bereich bereich="C" title="Beschreibung des Bauvorhabens">
			<div class="bereich-box">
				<div class="input-standard order-3 md:order-5 xl:order-3">
					<InputLabel
						title="Angaben zur Heizung, Lüftung, Energieerezugung, Qualität und Aufbau der Gebäudehülle usw."
					></InputLabel>

					<textarea class="rounded-e-none" rows="10" bind:value={ausweis.beschreibung}></textarea>

					<div class="help-label">
						<HelpLabel>
							Geben Sie kurz an: Heizung, Lüftung, regenerative
							Energie (Solar, PV) und die Gebäudehülle (Qualität,
							Aufbau).
						</HelpLabel>
					</div>
				</div>
			</div>
		</Bereich>

		<Bereich bereich="D" title="Gebäudepläne & Unterlagen">
			<div
				class="bereich-box grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6"
			>
				<div class="md:box md:card mb-0">
					<div class="font-bold mb-2">Pläne</div>

					<div>
						Hier können sie Grundrisspläne, Ansichtspläne und
						Schnitte hochladen. Die Dateien können entweder im PDF
						Format oder als Bild hochgeladen werden.
					</div>
				</div>

				<div class="md:box md:card mb-0 mt-6 md:mt-0">
					<div>
						<strong
							>Bitte laden Sie hier mind. 1 Dokument hoch:</strong
						>
					</div>
					<FileGrid
						max={Infinity}
						min={1}
						name={"plaene"}
						bind:files={plaene}
						bind:ausweis
						bind:objekt
					></FileGrid>
				</div>
			</div>
			<div
				class="bereich-box grid grid-cols-1 lg:grid-cols-2 gap-x-6 mt-6"
			>
				<div class="md:box md:card mb-0">
					<div class="font-bold mb-2">Unterlagen</div>

					<div>
						Hier können sie weitere Unterlagen wie z.B.
						Baugenehmigungen, U-Wert Berechnungen, Anlagentechnik
						oder ihren alten Energieausweis hochladen. Die Dateien
						können entweder im PDF Format oder als Bild hochgeladen
						werden.
					</div>
				</div>

				<div class="md:box md:card mb-0 mt-6 md:mt-0">
					<FileGrid
						max={Infinity}
						min={0}
						name={"unterlagen"}
						bind:files={unterlagen}
						bind:ausweis
						bind:objekt
					></FileGrid>
				</div>
			</div>
		</Bereich>
	</div>

	<div
		class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
	>
		<div></div>

		<Hilfe />

		<button class="button" type="button" on:click={spaeterWeitermachen}
			>Später Weitermachen
		</button>

		<div>
			<Overlay bind:hidden={loginOverlayHidden}>
				<div class="bg-white w-full max-w-screen-sm py-8">
					<EmbeddedAuthFlowModule onLogin={ausweisAbschicken}
					></EmbeddedAuthFlowModule>
				</div>
			</Overlay>

			<button
				on:click={ausweisAbschicken}
				type="button"
				class="button"
				data-cy="weiter">Weiter</button
			>
		</div>
	</div>
</form>
