<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 HelpLabel from "#components/HelpLabel.svelte";
	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
	import Label from "#components/Label.svelte";
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import ZipSearch from "#components/PlzSuche.svelte";
	import moment from "moment";
	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
	import { Enums } from "@ibcornelsen/database/client"
	import Overlay from "#components/Overlay.svelte";
	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
		
	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
	export let ausweis: VerbrauchsausweisWohnenClient;
	export let user: BenutzerClient = {} as BenutzerClient;

	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 || [];

	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;
		}
	}

	function automatischAusfüllen() {
		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
		gebaeude_aufnahme_allgemein.saniert = true;
		gebaeude_aufnahme_allgemein.einheiten = 1;
		ausweis.ausstellgrund = "Vermietung";
		ausweis.verbrauch_1 = 15000;
		ausweis.verbrauch_2 = 14000;
		ausweis.verbrauch_3 = 16000;
		gebaeude_aufnahme_allgemein.flaeche = 152;
		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
		ausweis.keller_beheizt = true;
		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
		ausweis.einheit_1 = "kWh";
		ausweis.anteil_warmwasser_1 = 18;
		ausweis.startdatum = moment("01.01.2019").toDate();
		gebaeude_aufnahme_allgemein.plz = "21039";
		gebaeude_aufnahme_allgemein.ort = "Hamburg";
		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";

		gebaeude = gebaeude;
		ausweis = ausweis;
	}


	async function ausweisAbschicken(e: SubmitEvent) {
		if (e && e.preventDefault) e.preventDefault();
		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}`);
			window.location.href = `/kundendaten?uid=${result.uid}`;
		}
	}

	let waitOverlayHidden = true;
	let speichernOverlayHidden = true;

	$: {
		if (gebaeude_aufnahme_allgemein.saniert 
			&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt  === undefined
			&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {

			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
		}
	}
</script>

<Overlay bind:hidden={speichernOverlayHidden}>
	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
	</div>
</Overlay>

<Overlay bind:hidden={waitOverlayHidden}>
	<p class="text-white font-semibold text-4xl">
		Bitte warten sie, ihr Ausweis wird nun erstellt.
	</p>
</Overlay>

<div class="flex flex-row gap-8 items-center mb-8">
	<div class="flex flex-col w-full">
		<h1>Verbrauchsausweis erstellen - 45€</h1>
		<Progressbar progress={0} />
	</div>

	<PerformanceScore
		bind:ausweis
		bind:gebaeude_aufnahme_allgemein
		bind:gebaeude
	/>
</div>

<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
	<div class="yellow-box">
		<div class="flex flex-row justify-between">
			<button class="button" type="button" on:click={spaeterWeitermachen}
				>Später Weitermachen</button
			>
			<div class="flex gap-4">
				<Hilfe />
				<button
					on:click={automatischAusfüllen}
					type="button"
					class="button">Automatisch Ausfüllen</button
				>
			</div>
		</div>

		<hr />

		<Label>A - Prüfung der Ausweisart</Label>

		<Ausweisart
			bind:gebaeude
			bind:gebaeude_aufnahme_allgemein
			bind:ausweis
		/>

		<hr />

		<Label
			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
			Dachgeschoss</Label
		>

		<div class="GRB">
			<!-- Strasse -->
			<div class="form-group col-md-4">
				<HelpLabel title="Straße, Hausnummer *">
					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
					ein.
				</HelpLabel>
				<div>
					<input
						name="adresse"
						data-test="adresse"
						type="text"
						autocomplete="off"
						required
						data-msg-minlength="min. 5 Zeichen"
						data-msg-maxlength="max. 40 Zeichen"
						bind:value={gebaeude_aufnahme_allgemein.adresse}
					/>
				</div>
			</div>

			<!-- PLZ -->
			<div class="form-group col-md-4 PLZ">
				<ZipSearch
					bind:zip={gebaeude_aufnahme_allgemein.plz}
					bind:city={gebaeude_aufnahme_allgemein.ort}
					name="plz"
				/>
			</div>

			<div class="form-group col-md-4">
				<HelpLabel title="Ort *">
					Ort des Gebäudes wird automatisch ermittelt.
				</HelpLabel>
				<div>
					<input
						name="ort"
						data-test="ort"
						readonly={true}
						bind:value={gebaeude_aufnahme_allgemein.ort}
						type="text"
					/>
				</div>
			</div>
			<!-- Wohnfläche -->
			<div class="form-group col-md-3">
				<HelpLabel title="Wohnfläche m² *">
					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
					Dabei handelt es sich um die Wohnfläche abzüglich
					vorhandener Flächen die sich außerhalb des Gebäudes
					befinden. (Balkone, Terassen,etc.).
				</HelpLabel>
				<div>
					<input
						name="flaeche"
						data-test="flaeche"
						maxlength="4"
						type="number"
						required
						autocomplete="off"
						data-rule-minlength="2"
						data-msg-minlength="min. 2 Zeichen"
						bind:value={gebaeude_aufnahme_allgemein.flaeche}
					/>
				</div>
			</div>

			<!-- Keller -->
			<div class="form-group col-md-3">
				<Label>Keller *</Label>
				<div>
					<select
						name="keller"
						data-test="keller"
						required
						bind:value={gebaeude_aufnahme_allgemein.keller}
					>
						<option disabled>Bitte auswählen</option>
						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
							>nicht vorhanden</option
						>
						<option value={Enums.Heizungsstatus.UNBEHEIZT}
							>unbeheizt</option
						>
						<option value={Enums.Heizungsstatus.BEHEIZT}
							>beheizt</option
						>
					</select>
				</div>
			</div>

			<!-- Dachgeschoss -->
			<div class="form-group col-md-3">
				<Label>Dachgeschoss *</Label>
				<div>
					<select
						name="dachgeschoss"
						data-test="dachgeschoss"
						bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
						required
					>
						<option disabled>Bitte auswählen</option>
						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
							>nicht vorhanden</option
						>
						<option value={Enums.Heizungsstatus.UNBEHEIZT}
							>unbeheizt</option
						>
						<option value={Enums.Heizungsstatus.BEHEIZT}
							>beheizt</option
						>
					</select>
				</div>
			</div>

			<!-- Gesamtfläche -->
			<div class="form-group col-md-3">
				<HelpLabel title="Gesamtfläche m²">
					Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
					(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
					weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
					beheizten Kellers). Diese Fläche wird dann im Energieausweis
					als energetische Nutzfläche (An) ausgewiesen.
				</HelpLabel>
				<div>
					<input
						name="nutzflaeche"
						data-test="nutzflaeche"
						maxlength="4"
						type="number"
						required
						autocomplete="off"
						data-rule-minlength="2"
						data-msg-minlength="min. 2 Zeichen"
						bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
					/>
				</div>
			</div>
		</div>

		<hr />

		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>

		<div class="GRB">
			<Verbrauch
				bind:gebaeude
				bind:gebaeude_aufnahme_allgemein
				bind:ausweis
			/>
		</div>

		<hr />

		<Label
			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
			Energieversorgungssystemen</Label
		>

		<div class="GRB">
			<!-- Anteil WW enthalten -->
			<div class="flex flex-col">
				<div class="flex flex-row gap-4 items-center">
					<input
						type="checkbox"
						class="checkbox"
						name="warmwasser_enthalten"
						data-test="warmwasser_enthalten"
						bind:checked={ausweis.warmwasser_enthalten}
					/>
					<Label>Warmwasser im Verbrauch enthalten</Label>
				</div>
				<div class="flex flex-row gap-4 items-center">
					<input
						type="checkbox"
						class="checkbox"
						name="warmwasser_anteil_bekannt"
						data-test="warmwasser_anteil_bekannt"
						bind:checked={ausweis.warmwasser_anteil_bekannt}
						disabled={!ausweis.warmwasser_enthalten}
					/>
					<Label>Anteil bekannt</Label>
				</div>
			</div>

			<!-- Warmwasser Antel -->
			<div class="form-group col-md-2">
				<HelpLabel title="% Anteil Warmwasser">
					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
				</HelpLabel>

				<input
					name="anteil_warmwasser_1"
					data-test="anteil_warmwasser_1"
					maxlength="2"
					type="number"
					bind:value={ausweis.anteil_warmwasser_1}
					disabled={!ausweis.warmwasser_anteil_bekannt ||
						!ausweis.warmwasser_enthalten}
					autocomplete="off"
				/>
			</div>

			<div class="form-group col-md-2">
				<HelpLabel title="zusätzliche Heizquelle">
					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
					ein Anteil von 18% angenommen.
				</HelpLabel>
				<input
					name="anteil_warmwasser_2"
					data-test="anteil_warmwasser_2"
					maxlength="3"
					type="number"
					autocomplete="off"
					bind:value={ausweis.anteil_warmwasser_2}
					disabled={!ausweis.zusaetzliche_heizquelle ||
						!ausweis.warmwasser_anteil_bekannt ||
						!ausweis.warmwasser_enthalten}
				/>
			</div>

			<!-- Alternative Energieversorgungssyteme -->
			<div class="form-group col-md-5">
				<HelpLabel
					title="Alternative Energieversorgungssysteme genutzt für "
				>
					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
				</HelpLabel>
				<div class="flex flex-row gap-4">
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="alternative_heizung"
							data-test="alternative_heizung"
							bind:checked={ausweis.alternative_heizung}
							value="Heizung"
						/>Heizung</label
					>
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="alternative_warmwasser"
							data-test="alternative_warmwasser"
							bind:checked={ausweis.alternative_warmwasser}
							value="Warmwasser"
						/>Warmwasser</label
					>
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="alternative_lueftung"
							data-test="alternative_lueftung"
							bind:checked={ausweis.alternative_lueftung}
							value="Lüftung"
						/>Lüftung</label
					>
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="alternative_kuehlung"
							data-test="alternative_kuehlung"
							bind:checked={ausweis.alternative_kuehlung}
							value="Kühlung"
						/>Kühlung</label
					>
				</div>
			</div>
		</div>

		<hr />

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

		<div class="GRB">
			<!-- Gebäudetyp -->
			<div class="form-group col-md-3">
				<HelpLabel title="Gebäudetyp *">
					Bitte wählen Sie hier den Gebäudetyp aus.
				</HelpLabel>
				<div>
					<select
						name="gebaeudetyp"
						data-test="gebaeudetyp"
						bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
						required
					>
						<option disabled>Bitte auswählen</option>
						<option value="Einfamilienhaus">Einfamilienhaus</option>
						<option value="Freistehendes Einfamilienhaus"
							>Freistehendes Einfamilienhaus</option
						>
						<option value="Freistehendes Zweifamilienhaus"
							>Freistehendes Zweifamilienhaus</option
						>
						<option value="Doppelhaushälfte"
							>Doppelhaushälfte</option
						>
						<option value="Reihenendhaus">Reihenendhaus</option>
						<option value="Reihenmittelhaus"
							>Reihenmittelhaus</option
						>
						<option value="Mehrfamilienhaus"
							>Mehrfamilienhaus</option
						>
						<option value="Wohn- und Geschäftshaus"
							>Wohn- und Geschäftshaus</option
						>
						<option value="Atrium-Bungalow">Atrium-Bungalow</option>
						<option value="Winkelbungalow">Winkelbungalow</option>
					</select>
				</div>
			</div>

			<!-- Gebäudeteil -->
			<div class="form-group col-md-3">
				<HelpLabel title="Gebäudeteil *">
					Bitte geben Sie hier den Gebäudeteil ein. In den meisten
					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
					handeln, so sollten 2 Ausweise erstellt werden. In diesem
					Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
					'Gewerbe'.
				</HelpLabel>
				<div>
					<select
						name="gebaeudeteil"
						data-test="gebaeudeteil"
						bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
						required
					>
						<option disabled>Bitte auswählen</option>
						<option value="Gesamtgebäude">Gesamtgebäude</option>
						<option value="Wohnen">Wohnen</option>
					</select>
				</div>
			</div>

			<!-- Lüftung -->
			<div class="form-group col-md-2">
				<HelpLabel title="Lüftung durch *">
					Bitte geben Sie hier ein ob über die Fenster natürlich
					belüftet wird oder über eine Lüftungsanlage.
				</HelpLabel>
				<div>
					<select
						name="lueftung"
						data-test="lueftung"
						required
						bind:value={gebaeude_aufnahme_allgemein.lueftung}
					>
						<option disabled>Bitte auswählen</option>
						<option value="Fensterlüftung">Fensterlüftung</option>
						<option value="Schachtlüftung">Schachtlüftung</option>
						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
							>Lüftungsanlage ohne Wärmerückgewinnung</option
						>
						<option value="Lüftungsanlage mit Wärmerückgewinnung"
							>Lüftungsanlage mit Wärmerückgewinnung</option
						>
					</select>
				</div>
			</div>

			<!-- Lüftung -->
			<div class="form-group col-md-2">
				<HelpLabel title="Anlage Kühlung *">
					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
					gekühlt wird.
				</HelpLabel>
				<div>
					<select
						name="kuehlung"
						data-test="kuehlung"
						required
						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
					>
						<option disabled>Bitte auswählen</option>
						<option value="1">vorhanden</option>
						<option value="0">nicht vorhanden</option>
					</select>
				</div>
			</div>

			<!-- Leerstand -->
			<div class="form-group col-md-2">
				<HelpLabel title="Leerstand in %">
					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
					wären dann ca. 11%.
				</HelpLabel>
				<div>
					<input
						name="leerstand"
						data-test="leerstand"
						maxlength="2"
						type="number"
						bind:value={gebaeude_aufnahme_allgemein.leerstand}
					/>
				</div>
			</div>
		</div>

		<hr />

		<Label
			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
			Gebäudes</Label
		>
		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
		<hr />
		<div class="flex flex-row justify-between">
			<Hilfe />
			<button type="submit" class="button">Weiter</button>
		</div>
	</div>
</form>

<RawNotificationWrapper>
	{#each Object.entries($notifications) as [uid, notification] (uid)}
		<RawNotification notification={{ ...notification, uid }}>
			{@html notification.subtext}
		</RawNotification>
	{/each}

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

	{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) 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(gebaeude_aufnahme_allgemein)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
					gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
				},
				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(gebaeude_aufnahme_allgemein)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "HEIZUNG_JUENGER_DREI_JAHRE",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
					gebaeude = gebaeude;
				},
				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, gebaeude)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "ZEITRAUM_AKTUELL",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.ZEITRAUM_AKTUELL);
					gebaeude = gebaeude;
				},
				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, gebaeude) then result}
		{#if result}
			<RawNotification
				notification={{
					message: "Plausibilitätsprüfung",
					timeout: 0,
					uid: "KLIMA_FAKTOREN",
					dismissable: true,
					onUserDismiss: () => {
						hidden.add(AuditType.KLIMA_FAKTOREN);
						gebaeude = gebaeude;
					},
					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(gebaeude_aufnahme_allgemein)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "WOHN_FLAECHE",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.WOHN_FLAECHE);
					gebaeude = gebaeude;
				},
				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);
					gebaeude = gebaeude;
				},
				type: "warning",
			}}
		>
			Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
			scheint nicht ganz im Rahmen zu liegen.
		</RawNotification>
	{/if}

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

	{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
		{#if result}
			<RawNotification
				notification={{
					message: "Plausibilitätsprüfung",
					timeout: 0,
					uid: "END_ENERGIE",
					dismissable: true,
					onUserDismiss: () => {
						hidden.add(AuditType.END_ENERGIE);
						gebaeude = gebaeude;
					},
					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(gebaeude_aufnahme_allgemein)}
		<RawNotification
			notification={{
				message: "Plausibilitätsprüfung",
				timeout: 0,
				uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
				dismissable: true,
				onUserDismiss: () => {
					hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
					gebaeude = gebaeude;
				},
				type: "warning",
			}}
		>
			Die Wohnfläche darf nicht größer als die Nutzfläche sein.
		</RawNotification>
	{/if}
</RawNotificationWrapper>

<style>
	:global(input[type="number"]),
	:global(input[type="text"]) {
		@apply input input-bordered py-1.5 px-2 h-auto;
	}

	:global(input[type="number"]:disabled) {
		@apply bg-gray-200 border border-gray-300;
	}

	:global(.linked) {
		@apply border-2 border-red-400;
	}
</style>
