<script lang="ts">
	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
	import Progressbar from "#components/Ausweis/Progressbar.svelte";
	//import Hilfe from "#components/Ausweis/Hilfe.svelte";
	
	import Bereich from "#components/labels/Bereich.svelte";

	import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import GebaeudeVolumen from "#components/Ausweis/GebaeudeVolumen.svelte";
	import Fensterflaechen  from "#components/Ausweis/Fensterflaechen.svelte";
	import LueftungKuehlung  from "#components/Ausweis/LueftungKuehlung.svelte";

	import SanierungszustandHeizungsanlage from "#components/Ausweis/SanierungszustandHeizungsanlage.svelte";
	import SanierungszustandFensterTueren from "#components/Ausweis/SanierungszustandFensterTueren.svelte";
	import SanierungszustandWaermedammung from "#components/Ausweis/SanierungszustandWaermedammung.svelte";
	import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";

	
	import moment from "moment";
	import { Enums } from "#lib/client/prisma.js";
	import {
		BedarfsausweisWohnenClient,
		BenutzerClient,
		ObjektClient,
		UploadedGebaeudeBild,
		AufnahmeClient
	} from "#components/Ausweis/types.js";

	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";

	export let ausweis: BedarfsausweisWohnenClient;
	export let objekt: ObjektClient
	export let aufnahme: AufnahmeClient
	export let user: BenutzerClient = {} as BenutzerClient;
	export let bilder: UploadedGebaeudeBild[] = []
	export let uid: string;

	if (!uid && (!ausweis.updated_at || moment(localStorage.getItem("bedarfsausweis-wohnen.updated_at") || new Date()).isAfter(ausweis.updated_at))) {
		const localStorageAusweis = localStorage.getItem("bedarfsausweis-wohnen.ausweis");
		if (localStorageAusweis) {
			ausweis = JSON.parse(localStorageAusweis)
		}

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

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

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

	$: {
		localStorage.setItem("bedarfsausweis-wohnen.ausweis", JSON.stringify(ausweis))
		localStorage.setItem("bedarfsausweis-wohnen.aufnahme", JSON.stringify(aufnahme))
		localStorage.setItem("bedarfsausweis-wohnen.objekt", JSON.stringify(objekt))
		localStorage.setItem("bedarfsausweis-wohnen.bilder", JSON.stringify(bilder))
		localStorage.setItem("bedarfsausweis-wohnen.updated_at", moment().toString())
	}

	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];

	let fensterArten = {
		Einfachverglasung: 5,
		"Holzfenster Doppelverglasung": 2.7,
		"Kunststofffenster Doppelverglasung": 3,
		"Alu- oder Stahlfenster Doppelverglasung": 4.3,
		"Fenster Doppelverglasung (ab 1995)": 1.8,
		"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
		"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
		"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
		"Passivhausfenster(U-Wert 0,7)": 0.7,
		"Passivhausfenster(U-Wert 0,6)": 0.6,
		"Fenster mit U-Wert 2,3": 2.3,
		"Fenster mit U-Wert 1,6": 1.6,
		"Fenster mit U-Wert 1,7": 1.7,
		"Fenster mit U-Wert 1,3": 1.3,
		"Fenster mit U-Wert 1": 1,
	};

	async function spaeterWeitermachen() {
		// const result = await verbrauchsausweisWohnenSpeichern(
		// 	ausweis,
		// 	gebaeude,
		// 	aufnahme,
		// 	images,
		// 	user
		// );
		// if (result !== null) {
		// 	// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
		// 	// Sonst müsste er alles neu eingeben...
		// 	ausweis.uid = result.uid;
		// 	gebaeude.uid = result.gebaeude_uid;
		// 	aufnahme.uid = result.gebaeude_aufnahme_uid;
		// 	window.history.pushState(
		// 		{},
		// 		"",
		// 		`${location.pathname}?uid=${result.uid}`
		// 	);
		// 	speichernOverlayHidden = false;
		// }
	}

	
	const arrayRange = (start: number, stop: number, step: number) =>
		Array.from(
			{ length: (stop - start) / step + 1 },
			(value, index) => start + index * step
		);

	const ausweisart = Enums.Ausweisart.BedarfsausweisWohnen	
	const anliegen = "Energieausweis erstellen";

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


<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 lg:grid-cols-2 lg:gap-x-6" bind:this={skala}>
	
	<PerformanceScore
		bind:ausweis
		bind:aufnahme={aufnahme}
		bind:objekt={objekt}
		{ausweisart}
	/>

	<Progressbar active={0} {ausweisart} {anliegen}/>

</div>

<form id="formInput-1" bind:this={form} name="ausweis" data-cy="ausweis">
	<div id="formular-box" class="formular-boxen ring-0">


		<ButtonSpaeterHilfe {spaeterWeitermachen} />

		<!-- A Prüfung der Ausweisart -->

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

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

<!-- 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
		>


<!-- C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen -->

		<Bereich
		bereich="C"
		title="Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und Gebäudevolumen"
		><GebaeudeVolumen bind:ausweis/></Bereich>


<!-- D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden und Boden -->

<Bereich
bereich="D"
title="Eingabe der Fensterflächen und Konstruktion von Dach, Wänden und Boden"
><Fensterflaechen bind:ausweis/></Bereich>
	


<!-- E - Angabe zu Lüftung und Kühlung -->

<Bereich
bereich="E"
title="Angabe zu Lüftung und Kühlung"
><LueftungKuehlung bind:ausweis/></Bereich>




<!-- F Angaben zur Heizungsanlage -->
<Bereich bereich="F" title="Angaben zur Heizunganlage"
			><SanierungszustandHeizungsanlage
				bind:images={bilder}
				bind:objekt
				bind:aufnahme
				bind:ausweis
				{ausweisart}
			/></Bereich
			>
	
			<!-- G Angaben zur Fenster, Dachfenster und Türen -->
	
			<Bereich bereich="G" title="Angaben zu Fenster, Dachfenster und Türen"
				><SanierungszustandFensterTueren
					bind:images={bilder}
					bind:objekt
					bind:aufnahme
					bind:ausweis
				/></Bereich
			>
			<!-- H Angaben zur Wärmedammung -->
	
			<Bereich bereich="H" title="Angaben zur Wärmedämmung"
				><SanierungszustandWaermedammung
					bind:images={bilder}
					bind:objekt
					bind:aufnahme
					bind:ausweis
				/></Bereich
			>
	
			<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->
	
			<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
				><AusweisPreviewContainer
					bind:images={bilder}
					bind:ausweis
					bind:objekt
					bind:aufnahme
					{ausweisart}
				/></Bereich
			>

		</div>
		
			<ButtonWeiterHilfe {spaeterWeitermachen}
			bind:ausweis
			bind:bilder
			bind:user
			bind:objekt
			bind:aufnahme
			ausweisart={Enums.Ausweisart.BedarfsausweisWohnen}
			{form}
			{skala}
			/>

	
</form>
