<script lang="ts">
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import {
		ObjektClient,
		AufnahmeClient,
		BenutzerClient,
		UnterlageClient,
		BildClient,
	} from "#components/Ausweis/types.js";
	import Bereich from "#components/labels/Bereich.svelte";
	import { BedarfsausweisGewerbe, Enums, Unterlage } from "#lib/client/prisma.js";
	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";
	import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
	import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
	import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
	import AnlagenTechnik from "#components/Ausweis/AnlagenTechnik.svelte";
	import moment from "moment";
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";

	export let nachweis: BedarfsausweisGewerbe;
	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let user: BenutzerClient = {} as BenutzerClient;
	export let bilder: BildClient[] = [];
	export let unterlagen: Unterlage[] = [];
	export let nachweistyp: Enums.AusweisTyp;
	export let id: string | null;

	export let loadFromDatabase: boolean = false

	// Wir holen die daten aus dem LocalStorage falls
	// Der Nutzer kein Admin ist
	// Der Ausweis noch nicht gespeichert wurde
	// oder der Ausweis bereits gespeichert wurde aber die Daten im localStorage neuer sind als die Daten aus der Datenbank.
	if ((user && user.rolle !== Enums.BenutzerRolle.ADMIN) && !loadFromDatabase && (!nachweis.updated_at || moment(localStorage.getItem("geg-nachweis-wohnen.updated_at") || new Date()).isAfter(nachweis.updated_at))) {
		const localStorageAusweis = localStorage.getItem("geg-nachweis-wohnen.ausweis");
		if (localStorageAusweis) {
			nachweis = JSON.parse(localStorageAusweis)
			nachweis.nachweistyp = nachweistyp;
		}

		const localStorageAufnahme = localStorage.getItem("geg-nachweis-wohnen.aufnahme");
		if (localStorageAufnahme) {
			aufnahme = JSON.parse(localStorageAufnahme)
		}

		const localStorageObjekt = localStorage.getItem("geg-nachweis-wohnen.objekt");
		if (localStorageObjekt) {
			objekt = JSON.parse(localStorageObjekt)
		}

		const localStorageBilder = localStorage.getItem("geg-nachweis-wohnen.bilder");
		if (localStorageBilder) {
			bilder = JSON.parse(localStorageBilder)
		}

		const localStorageUnterlagen = localStorage.getItem("geg-nachweis-wohnen.unterlagen");
		if (localStorageUnterlagen) {
			bilder = JSON.parse(localStorageUnterlagen)
		}
	}

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

	const ausweisart = Enums.Ausweisart.BedarfsausweisGewerbe;
	const anliegen = "Angebot anfragen";

	let form: HTMLFormElement;
	let skala: HTMLDivElement;
</script>

<div
	id="skala"
	bind:this={skala}
	class="bg-white grid grid-cols-1 p-4 lg:grid-cols-2 lg:gap-x-6 no-scroll"
>
	<Progressbar
		active={0}
		{ausweisart}
		{anliegen}
		steps={["Gebäudedaten", "Kundendaten", "Anfragebestätigung"]}
		ausweistyp={nachweistyp}
	/>
</div>

<form id="formInput-1" name="ausweis" data-test="ausweis" bind:this={form}>
	<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={nachweis}
				{ausweisart}
				ausstellgrund={[
					Enums.Ausstellgrund.Neubau,
					Enums.Ausstellgrund.Modernisierung,
					Enums.Ausstellgrund.Verkauf,
					Enums.Ausstellgrund.Vermietung,
					Enums.Ausstellgrund.Sonstiges
				]}
			/>
		</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="Angaben zur Heizungsanlage"
			><SanierungszustandHeizungsanlage bind:ausweis={nachweis} bind:images={bilder} bind:aufnahme bind:objekt {ausweisart} /></Bereich
		>

		<Bereich
			bereich="D"
			title="Angaben zu Fenster, Dachfenster und Türen"
			><SanierungszustandFensterTueren bind:ausweis={nachweis} bind:images={bilder} bind:aufnahme bind:objekt {ausweisart} /></Bereich
		>

		<Bereich
			bereich="E"
			title="Angaben zur Wärmedämmung"
			><SanierungszustandWaermedammung bind:ausweis={nachweis} bind:images={bilder} bind:aufnahme bind:objekt {ausweisart} /></Bereich
		>

		<Bereich
			bereich="F"
			title="Angaben zur Anlagentechnik"
			><AnlagenTechnik bind:ausweis={nachweis} bind:images={bilder} bind:aufnahme bind:objekt {ausweisart} /></Bereich
		>

		<Bereich bereich="G" 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">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 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">
					<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
		showHelpButton={false}
		ausweisart={Enums.Ausweisart.BedarfsausweisGewerbe}
		{form}
		{skala}
	></ButtonWeiterHilfe>
</form>
