<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 { PRICES } from "#lib/constants";

	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
	import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
	import ThermischeKuehlung from "#components/Ausweis/ThermischeKuehlung.svelte";
	import LueftungundLeerstand from "#components/Ausweis/LueftungundLeerstand.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 Bereich from "#labels/Bereich.svelte";
	import HelpLabel from "#components/HelpLabel.svelte";
	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
	import StromVerbrauch from "#components/Ausweis/StromVerbrauch.svelte";
	import Label from "#components/Label.svelte";
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import ZipSearch from "../../components/PlzSuche.svelte";
	import { buildingTypes } from "./BuildingTypes.js";
	import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
	import moment from "moment";
	import { Enums } from "@ibcornelsen/database/client";
	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient } from "#components/Ausweis/types.js";
	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";

	export let ausweis: VerbrauchsausweisGewerbeClient;
	export let user: BenutzerClient = {} as BenutzerClient;

	export let Energieausweis	=	"Verbrauchsausweis Gewerbe";

	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];

		function automatischAusfüllen() {
	}

	async function spaeterWeitermachen() {
		const result = await verbrauchsausweisWohnenSpeichern(
			ausweis,
			gebaeude,
			gebaeude_aufnahme_allgemein,
			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;
			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid;
			window.history.pushState(
				{},
				"",
				`${location.pathname}?uid=${result.uid}`
			);
			speichernOverlayHidden = false;
		}
	}
</script>


<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4

2xl:grid-cols-2 2xl:gap-x-8
">

<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
	<PerformanceScore
		bind:ausweis
		bind:gebaeude_aufnahme_allgemein
		bind:gebaeude
	/>
</div>

<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
		
	<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
	<h2 class="text-primary text-xl">{Energieausweis} {PRICES.VerbrauchsausweisGewerbe[0]} €</h2>
	<ProgressBar progress={0} />
</div>

</div>



<!-- TODO: Submit implementieren in externer Datei wenn Verbrauchsausweis Wohnen fertig ist -->

<form id="formInput-1" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
	<div id="formular-box" class="formular-boxen ring-0">

		<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />

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

		<Bereich bereich="A" title="Prüfung der Ausweisart">
			<Ausweisart
				bind:gebaeude
				bind:gebaeude_aufnahme_allgemein
				bind:ausweis
				{Energieausweis}
			/>
		</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:gebaeude_aufnahme_allgemein />
			</Bereich
		>

		<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->

		<Bereich
			bereich="C"
			title="Eingabe von 3 zusammenhängenden Verbrauchsjahren"
			>
			<StromVerbrauch
			bind:gebaeude
			bind:gebaeude_aufnahme_allgemein
			bind:ausweis
		/>
			</Bereich>

		<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->

		<Bereich
			bereich="D"
			title="Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen"
			>
			<Warmwasseranteil bind:ausweis />
			
			<ThermischeKuehlung bind:ausweis />
			</Bereich
		>

		<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->

		<Bereich
			bereich="E"
			title="Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand"
			><LueftungundLeerstand bind:gebaeude_aufnahme_allgemein /></Bereich
		>

		<!-- F Angaben zur Heizungsanlage -->

		<Bereich bereich="F" title="Angaben zur Heizunganlage"
			><SanierungszustandHeizungsanlage
				bind:images
				bind:gebaeude
				bind:gebaeude_aufnahme_allgemein
				bind:ausweis
			/></Bereich
		>

		<!-- G Angaben zur Fenster, Dachfenster und Türen -->

		<Bereich bereich="G" title="Angaben zu Fenster, Dachfenster und Türen"
			><SanierungszustandFensterTueren
				bind:images
				bind:gebaeude
				bind:gebaeude_aufnahme_allgemein
				bind:ausweis
			/></Bereich
		>
		<!-- H Angaben zur Wärmedammung -->

		<Bereich bereich="H" title="Angaben zur Wärmedämmung"
			><SanierungszustandWaermedammung
				bind:images
				bind:gebaeude
				bind:gebaeude_aufnahme_allgemein
				bind:ausweis
			/></Bereich
		>

		<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->

		<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
			><AusweisPreviewContainer
				bind:images
				bind:ausweis
				bind:gebaeude
			/></Bereich>
			
		</div>			
		
			<ButtonWeiterHilfe {spaeterWeitermachen}
			bind:ausweis
			bind:images
			bind:user
			bind:gebaeude
			bind:gebaeude_aufnahme_allgemein
			>
			</ButtonWeiterHilfe>
		
		
</form>
