<script lang="ts">
	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
	import Progressbar from "#components/Ausweis/Progressbar.svelte";
	
	import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
	import Ausweisart from "#components/Ausweis/Ausweisart.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 "#components/labels/Bereich.svelte";
	import StromVerbrauch from "#components/Ausweis/StromVerbrauch.svelte";
	import { AufnahmeClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient } from "#components/Ausweis/types.js";
	import { BenutzerClient } from "#components/Ausweis/types.js";
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import { Enums } from "#lib/client/prisma.js";
	import moment from "moment";
	import {
		AuditType,
		hidden,
	} from "#components/Verbrauchsausweis/audits/hidden.js";
	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
	import {
		RawNotificationWrapper,
		RawNotification,
		notifications,
	} from "#components/Notifications/index.js";

	export let ausweis: VerbrauchsausweisGewerbeClient;
	export let user: BenutzerClient;
	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let bilder: UploadedGebaeudeBild[];

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

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

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

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

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

	let waitOverlayHidden = true;
	let speichernOverlayHidden = true;

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

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


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

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

</div>





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

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

		<ButtonWeiterHilfe
		bind:ausweis
		bind:bilder
		bind:user
		bind:objekt
		bind:aufnahme
		ausweisart={Enums.Ausweisart.VerbrauchsausweisGewerbe}
		showWeiter={false}
		{form}
		{skala}
		>
		</ButtonWeiterHilfe>

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

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

		<Bereich
			bereich="C"
			title="Eingabe von 3 zusammenhängenden Verbrauchsjahren"
			>
			<StromVerbrauch
			bind:aufnahme
			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:aufnahme /></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
			bind:ausweis
			bind:bilder
			bind:user
			bind:objekt
			bind:aufnahme
			ausweisart={Enums.Ausweisart.VerbrauchsausweisGewerbe}
			showWeiter={true}
			{form}
			{skala}
			>
			</ButtonWeiterHilfe>
		
		
</form>


<RawNotificationWrapper class="fixed left-8 bottom-8 max-w-[400px] flex flex-col gap-4 z-50">
	{#each Object.entries($notifications) as [uid, notification] (uid)}
		<RawNotification notification={{ ...notification, uid }}>
			{@html notification.subtext}
		</RawNotification>
	{/each}

	{#if auditBedarfsausweisBenoetigt(ausweis, aufnahme)}
		<RawNotification
			notification={{
				message: "Bedarfsausweis benötigt!",
				timeout: 0,
				uid: "BEDARFSAUSWEIS",
				dismissable: false,
				type: "info",
			}}
		>
			Sie benötigen einen Bedarfsausweis. <a href="/energieausweis-erstellen/bedarfsausweis-erstellen"
				>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
			>.
		</RawNotification>
	{/if}

	{#if typeof aufnahme.einheiten === "number" && aufnahme.einheiten < 1}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "ANZAHL_EINHEITEN",
				dismissable: false,
				type: "warning",
				selector: "input[name='einheiten']"
			}}
		>
			Die Anzahl der Wohneinheiten muss mindestens 1 betragen.
		</RawNotification>
	{/if}

	{#await auditPlzNichtErkannt(objekt) then result}
		{#if result}
			<RawNotification
				notification={{
					message: "Plausibilitätsprüfung",
					timeout: 0,
					uid: "PLZ_NICHT_ERKANNT",
					dismissable: false,
					type: "warning",
				}}
			>
				Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
				Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
				sein, werden wir den Ort händisch zuordnen.
			</RawNotification>
		{/if}
	{/await}

	{#if auditHeizungGebaeudeBaujahr(aufnahme)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
					aufnahme = aufnahme;
				},
				type: "warning",
			}}
		>
			Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
			wurde. Sind sie sich sicher, dass das stimmt?
		</RawNotification>
	{/if}

	{#if auditHeizungJuengerDreiJahre(aufnahme)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "HEIZUNG_JUENGER_DREI_JAHRE",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
					aufnahme = aufnahme;

				},
				type: "warning",
			}}
		>
			Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
			Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
			die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
			ist daher nicht möglich. Bitte klicken Sie
			<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
			zu gelangen.
		</RawNotification>
	{/if}

	{#if auditZeitraumAktuell(ausweis, objekt)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "ZEITRAUM_AKTUELL",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.ZEITRAUM_AKTUELL);
					objekt = objekt;
					ausweis = ausweis
				},
				type: "warning",
			}}
		>
			Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
			letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
			zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
			nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
			zum Eingabeformular für den Bedarfsausweis zu gelangen.
		</RawNotification>
	{/if}

	{#await auditKlimaFaktoren(ausweis, objekt) then result}
		{#if result}
			<RawNotification
				notification={{
					message: "Plausibilitätsprüfung",
					timeout: 0,
					uid: "KLIMA_FAKTOREN",
					dismissable: true,
					onUserDismiss: () => {
						hidden.add(AuditType.KLIMA_FAKTOREN);
						objekt = objekt;
						ausweis = ausweis;
					},
					type: "warning",
				}}
			>
				Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
				Klimafaktoren dazu vor. Bitte verschieben Sie die
				Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
				ist, klicken Sie
				<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
				Bedarfsausweis zu gelangen.
			</RawNotification>
		{/if}
	{/await}

	{#if auditWohnFlaeche(aufnahme)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "WOHN_FLAECHE",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.WOHN_FLAECHE);
					aufnahme = aufnahme;
				},
				type: "warning",
			}}
		>
			Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
			nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
			Gebäude beziehen.
		</RawNotification>
	{/if}

	{#if auditWarmWasser(ausweis)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "WARM_WASSER",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.WARM_WASSER);
					ausweis = ausweis;
				},
				type: "warning",
			}}
		>
			Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
			scheint nicht ganz im Rahmen zu liegen.
		</RawNotification>
	{/if}

	{#if auditLeerStand(aufnahme)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "LEER_STAND",
				dismissable: false,
				type: "warning",
			}}
		>
			Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
			werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
			für den Bedarfsausweis zu gelangen.
		</RawNotification>
	{/if}

	{@const abweichung = auditVerbrauchAbweichung(ausweis, aufnahme)}
	{#if abweichung.length > 0}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "VERBRAUCH_ABWEICHUNG",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
					objekt = objekt;
					ausweis = ausweis;
				},
				type: "warning",
			}}
		>
			Die Abweichung der Verbräuche zwischen Zeitraum {abweichung[0]} und {abweichung[1]} beträgt mehr als 30% und sie haben keinen Leerstand angegeben.
			Sind sie sich sicher, dass das stimmt?
		</RawNotification>
	{/if}

	{#await auditEndEnergie(ausweis, objekt, aufnahme) then result}
		{#if result}
			<RawNotification
				notification={{
					message: "Plausibilitätsprüfung",
					timeout: 0,
					uid: "END_ENERGIE",
					dismissable: true,
					onUserDismiss: () => {
						hidden.add(AuditType.END_ENERGIE);
						objekt = objekt;
					},
					type: "warning",
				}}
			>
				Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
				nochmal überprüfen. Bei Passivhäusern oder ganz alten
				unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
			</RawNotification>
		{/if}
	{/await}

	{#if auditWohnflaecheGroesserGesamtflaeche(aufnahme)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
				dismissable: false,
				type: "error",
				selector: "input[name='nutzflaeche']"
				
			}}
		>
			Die Wohnfläche darf nicht größer als die Nutzfläche sein.
		</RawNotification>
	{/if}
</RawNotificationWrapper>