<script lang="ts">
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import {
		ObjektClient,
		AufnahmeClient,
		BenutzerClient,
		UploadedGebaeudeBild,
		UnterlageClient,
		GEGNachweisWohnenClient,
	} from "#components/Ausweis/types.js";
	import Bereich from "#components/labels/Bereich.svelte";
	import { Enums } from "#lib/client/prisma";
	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 ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
	import GEGAusweisart from "#components/GEGNachweis/GEGAusweisart.svelte";


	export let nachweis: GEGNachweisWohnenClient;
	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let user: BenutzerClient = {} as BenutzerClient;
	export let bilder: UploadedGebaeudeBild[] = [];
	export let plaene: UnterlageClient[] =
		[];
	export let unterlagen: UnterlageClient[] = [];

	if (Object.keys(nachweis).length === 0) {
		const localStorageAusweis = localStorage.getItem("ausweis");
		if (localStorageAusweis) {
			nachweis = 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 (Object.keys(bilder).length === 0) {
		const localStorageBilder = localStorage.getItem("bilder");
		if (localStorageBilder) {
			bilder = JSON.parse(localStorageBilder)
		}
	}

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


	$: {
		localStorage.setItem("ausweis", JSON.stringify(nachweis))
		localStorage.setItem("aufnahme", JSON.stringify(aufnahme))
		localStorage.setItem("objekt", JSON.stringify(objekt))
		localStorage.setItem("bilder", JSON.stringify(bilder))
		localStorage.setItem("unterlagen", JSON.stringify(unterlagen))
	}

	const ausweisart = Enums.Ausweisart.GEGNachweisWohnen;
</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">GEG-Nachweis Wohngebäude</h2>
		<Progressbar
			active={0}
			steps={["Gebäudedaten", "Kundendaten", "Bestätigung"]}
		/>
	</div>
</div>

<form
	id="formInput-1"
	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">
			<GEGAusweisart bind:objekt bind:aufnahme bind:ausweis={nachweis} {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={nachweis.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={nachweis}
						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={nachweis}
						bind:objekt
					></FileGrid>
				</div>
			</div>
		</Bereich>
	</div>

	<ButtonWeiterHilfe
	bind:ausweis={nachweis}
	bind:bilder
	bind:unterlagen
	bind:user
	bind:objekt
	bind:aufnahme
	ausweisart={Enums.Ausweisart.GEGNachweisWohnen}
	>
	</ButtonWeiterHilfe>

</form>
