<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";

	//import Label from "#components/Label.svelte";

	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
	import { addNotification, deleteNotification } from "#components/Notifications/shared.js";
	import TagInput from "../TagInput.svelte";
	import { Enums } from "@ibcornelsen/database/client";
	import {
	AufnahmeClient,
		ObjektClient,
		GEGNachweisWohnenClient,
	} from "../Ausweis/types.js";

	export let objekt: ObjektClient;
	export let ausweis:
		GEGNachweisWohnenClient;
	export let aufnahme: AufnahmeClient;

	export let ausweisart: Enums.Ausweisart;
</script>

<div id="ausweisart" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>
	<!-- Anlass für Energieausweis -->

	<div class="input-standard order-1 md:order-1 xl:order-1">
		<Inputlabel title="Anlass *"></Inputlabel>

		<select
			id="ausstellgrund"
			class="rounded-e-none"
			name="ausstellgrund"
			placeholder="Anlass"
			bind:value={ausweis.ausstellgrund}
			required
			data-cy="ausstellgrund"
		>
			<option disabled selected value={null}>Bitte auswählen</option>
			<option value={Enums.Ausstellgrund.Neubau}>Neubau</option>
			<option value={Enums.Ausstellgrund.Modernisierung}>Modernisierung</option>
		</select>

		<div class="help-label">
			<HelpLabel>Bitte wählen Sie aus wofür Sie den Energieausweis benötigen. 
				 <strong>Vermietung, Verkauf oder sonstiges (z.B. zur Vorlage bei der Bank) ist als Anlass für den Verbrauchsausweis zulässig.</strong> 
				 Neubau oder Modernisierung ist Sie hier nicht zulässig.</HelpLabel>
		</div>
	</div>

	<!-- Gebäudetyp -->

	<div class="input-standard order-2 md:order-3 xl:order-2">
		<Inputlabel title="Gebäudetyp *"></Inputlabel>

		<select
			name="gebaeudetyp"
			data-test="gebaeudetyp"
			required
			bind:value={aufnahme.gebaeudetyp}
		>
			<option disabled selected value={null}>Bitte auswählen</option>

			{#if ausweisart === Enums.Ausweisart.GEGNachweisWohnen}
			<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>

			{:else if ausweisart==Enums.Ausweisart.VerbrauchsausweisGewerbe}
			<option value="Verwaltungsgebäude (allgemein)">Verwaltungsgebäude (allgemein)</option>
			<option value="Parlaments- und Gerichtsgebäude">Parlaments- und Gerichtsgebäude</option>
			<option value="Ministerien u. Ämter u. Behörden">Ministerien u. Ämter u. Behörden</option>
			<option value="Polizeidienstgebäude">Polizeidienstgebäude</option>
			<option value="Gebäude für öffentliche Bereitschaftsdienste">Gebäude für öffentliche Bereitschaftsdienste</option>
			<option value="Feuerwehrdienstgebäude">Feuerwehrdienstgebäude</option>
			<option value="Bürogebäude">Bürogebäude</option>
			<option value="Bürogebäude - überwiegend Großraumbüros">Bürogebäude - überwiegend Großraumbüros</option>
			<option value="Bankgebäude">Bankgebäude</option>
			<option value="Hochschule und Forschung (allgemein)">Hochschule und Forschung (allgemein)</option>
			<option value="Gebäude für Lehre">Gebäude für Lehre</option>
			<option value="Institute für Lehre und Forschung">Institute für Lehre und Forschung</option>
			<option value="Gebäude für Forschung ohne Lehre">Gebäude für Forschung ohne Lehre</option>
			<option value="Laborgebäude">Laborgebäude</option>
			<option value="Gesundheitswesen (allgemein)">Gesundheitswesen (allgemein)</option>
			<option value="Krankenhäuser (ohne Forschung und Lehre)">Krankenhäuser (ohne Forschung und Lehre)</option>
			<option value="Krankenhäuser (ohne Forschung und Lehre) &amp; teilstationäre Versorgung">Krankenhäuser (ohne Forschung und Lehre) &amp; teilstationäre Versorgung</option>
			<option value="Medizinische Einrichtungen für nicht stationäre Versorgung">Medizinische Einrichtungen für nicht stationäre Versorgung</option>
			<option value="Gebäude für Reha">Gebäude für Reha</option>
			<option value="Bildungseinrichtungen (allgemein)">Bildungseinrichtungen (allgemein)</option>
			<option value="Schulen">Schulen</option>
			<option value="Kinderbetreuungseinrichtungen">Kinderbetreuungseinrichtungen</option>
			<option value="Kultureinrichtungen (allgemein)">Kultureinrichtungen (allgemein)</option>
			<option value="Bibliotheken/Archive">Bibliotheken/Archive</option>
			<option value="Ausstellungsgebäude">Ausstellungsgebäude</option>
			<option value="Veranstaltungsgebäude">Veranstaltungsgebäude</option>
			<option value="Gemeinschafts-/Gemeindehäuser">Gemeinschafts-/Gemeindehäuser</option>
			<option value="Opern/Theater">Opern/Theater</option>
			<option value="Sporteinrichtungen (allgemein)">Sporteinrichtungen (allgemein)</option>
			<option value="Sporthallen">Sporthallen</option>
			<option value="Fitnessstudios">Fitnessstudios</option>
			<option value="Schwimmhallen">Schwimmhallen</option>
			<option value="Gebäude für Sportaußenanlagen">Gebäude für Sportaußenanlagen</option>
			<option value="Verpflegungseinrichtungen (allgemein)">Verpflegungseinrichtungen (allgemein)</option>
			<option value="Beherbergungsstätten (allgemein)">Beherbergungsstätten (allgemein)</option>
			<option value="Hotels/Pensionen">Hotels/Pensionen</option>
			<option value="Jugendherbergen u. Ferienhäuser">Jugendherbergen u. Ferienhäuser</option>
			<option value="Gaststätten">Gaststätten</option>
			<option value="Mensen u. Kantinen">Mensen u. Kantinen</option>
			<option value="Gewerbliche und industrielle Gebäude (allgemein)">Gewerbliche und industrielle Gebäude (allgemein)</option>
			<option value="Gewerbliche und industrielle Gebäude - schwere Arbeit">Gewerbliche und industrielle Gebäude - schwere Arbeit</option>
			<option value="Gewerbliche und industrielle Gebäude - Mischung aus leichter u. schwerer Arbeit">Gewerbliche und industrielle Gebäude - Mischung aus leichter u. schwerer Arbeit</option>
			<option value="Gewerbliche und industrielle Gebäude - leichte Arbeit">Gewerbliche und industrielle Gebäude - leichte Arbeit</option>
			<option value="Gebäude für Lagerung">Gebäude für Lagerung</option>
			<option value="Verkaufsstätten (allgemein)">Verkaufsstätten (allgemein)</option>
			<option value="Kaufhäuser">Kaufhäuser</option>
			<option value="Kaufhauszentren/Einkaufszentren">Kaufhauszentren/Einkaufszentren</option>
			<option value="Märkte">Märkte</option>
			<option value="Märkte mit sehr hohem Anteil von Kühlung für Lebensmittel">Märkte mit sehr hohem Anteil von Kühlung für Lebensmittel</option>
			<option value="Läden">Läden</option>
			<option value="Läden mit sehr hohem Anteil von Kühlung für Lebensmittel">Läden mit sehr hohem Anteil von Kühlung für Lebensmittel</option>
			<option value="Fernmeldetechnik">Fernmeldetechnik</option>	
			{/if}
		</select>

		<div class="help-label">
			<HelpLabel><strong>Der Energieausweis bezieht sich immer auf das gesamte Gebäude</strong> oder den gesamten Wohnteil eines Mischgebäudes. 
				Für einzelne Wohnungen kann kein Energieausweis ausgestellt werden.</HelpLabel>
		</div>
	</div>
	{#if ausweisart=="VerbrauchsausweisWohnen"}
	<!-- Anzahl der Wohnungen -->

	<div class="input-standard order-3 md:order-5 xl:order-3">
		<Inputlabel title="Anzahl Wohnungen *"></Inputlabel>

		<input
			id="einheiten"
			class="rounded-e-none"
			name="einheiten"
			type="number"
			required
			autocomplete="off"
			data-msg="Pflichtfeld"
			maxlength="3"
			bind:value={aufnahme.einheiten}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
				Gebäude befinden.
			</HelpLabel>
		</div>
	</div>
	{:else if ausweisart=="VerbrauchsausweisGewerbe"}

	<!-- Baujahr Klimaanlage -->

	<div class="input-standard order-3 md:order-5 xl:order-3">
		<Inputlabel title="Baujahr Klimaanlage *"></Inputlabel>

		<TagInput
			name="baujahr_klimaanlage"
			type="number"
			onlyUnique={true}
			minlength={4}
			maxlength={4}
			onFocusIn={() => {
				addNotification({
					message: "Info",
					subtext:
						"Wussten sie, dass sie weitere Jahre angeben können? Z.B. das Baujahr der Erneuerung wesentlicher Komponenten ihrer Heizung. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
					dismissable: true,
					uid: "KLIMAANLAGE_BAUJAHR",
					timeout: 0,
					type: "info",
				});
			}}
			onFocusOut={() => {
				deleteNotification("KLIMAANLAGE_BAUJAHR");
			}}
			className={auditHeizungGebaeudeBaujahr(aufnahme)
				? "linked"
				: ""}
			bind:tags={aufnahme.baujahr_klima}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
				unterschiedliche Baujahre vorliegen, können Sie mehrere Jahre eingeben.
			</HelpLabel>
		</div>
	</div>

	{/if}

	<!-- Baujahr -->

	<div class="input-standard order-5 md:order-4 xl:order-5">
		<Inputlabel title="Baujahr *"></Inputlabel>

		<TagInput
			name="baujahr_gebaeude"
			type="number"
			minlength={4}
			maxlength={4}
			onlyUnique={true}
			onFocusIn={() => {
				addNotification({
					message: "Info",
					subtext:
						"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
					dismissable: true,
					uid: "GEBAEUDE_BAUJAHR",
					timeout: 0,
					type: "info",
				});
			}}
			onFocusOut={() => {
				deleteNotification("GEBAEUDE_BAUJAHR");
			}}
			className={auditHeizungGebaeudeBaujahr(aufnahme)
				? "linked"
				: ""}
			bind:tags={aufnahme.baujahr_gebaeude}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine grundlegende Sanierung stattgefunden haben, dann geben Sie das Sanierungsjahr ebenfalls an.
			</HelpLabel>
		</div>
	</div>

	<!-- Baujahr Heizung -->

	<div class="input-standard order-6 md:order-6 xl:order-6">
		<Inputlabel title="Baujahr Heizung *"></Inputlabel>

		<TagInput
			name="baujahr_heizung"
			type="number"
			onlyUnique={true}
			minlength={4}
			maxlength={4}
			onFocusIn={() => {
				addNotification({
					message: "Info",
					subtext:
						"Wussten sie, dass sie weitere Jahre angeben können? Z.B. das Baujahr der Erneuerung wesentlicher Komponenten ihrer Heizung. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
					dismissable: true,
					uid: "HEIZUNG_BAUJAHR",
					timeout: 0,
					type: "info",
				});
			}}
			onFocusOut={() => {
				deleteNotification("HEIZUNG_BAUJAHR");
			}}
			className={auditHeizungGebaeudeBaujahr(aufnahme)
				? "linked"
				: ""}
			bind:tags={aufnahme.baujahr_heizung}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
				unterschiedliche Baujahre vorliegen, können Sie mehrere Jahre eingeben.
			</HelpLabel>
		</div>
	</div>
</div>
