<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 { buildingTypes } from "./BuildingTypes";
	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";

	export let images: UploadedGebaeudeBild[] = [];
	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
	export let ausweis: VerbrauchsausweisGewerbeClient = {} as VerbrauchsausweisGewerbeClient;

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

		gebaeude = gebaeude;
		ausweis = ausweis;
	}
</script>

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

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

<!-- TODO: Submit implementieren in externer Datei wenn Verbrauchsausweis Wohnen fertig ist -->
<form name="ausweis" on:submit={() => {}}>
	<fieldset
		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
	>
		<div class="flex flex-row justify-between">
			<a class="button" href="/speichern">Später Weitermachen</a>
			<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:ausweis bind:gebaeude />

		<div
			class="flex flex-col p-4"
			class:hidden={!false}
		>
			<div class="form-group col-md-9">
				<HelpLabel
					title="Sie benötigen einen Bedarfsausweis. Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort und klicken auf den Button:"
				>
					Der Bedarfsausweis ist die etwas umfangreichere Berechnung.
					Sie benötigen z.B. Länge, Breite und Geschoßhöhe des
					Gebäudes. Auch müssen genauere Angaben zur Anlagentechnik
					gemacht werden.
				</HelpLabel>
			</div>

			<div class="form-group col-md-3">
				<a class="button" href="/bedarfsausweis"
					>Bedarfsausweis erstellen</a
				>
			</div>
		</div>
		<hr />
		<div>
			<Label
				>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche,
				Kellerund Dachgeschoss</Label
			>
		</div>

		<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"
						type="text"
						autocomplete="off"
						required
						minlength="5"
						maxlength="40"
						bind:value={gebaeude.adresse}
					/>
				</div>
			</div>

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

			<!-- IGort: readonly entfernt - Nelson -->
			<div class="form-group col-md-4">
				<HelpLabel title="Ort *">
					Ort des Gebäudes wird automatisch ermittelt.
				</HelpLabel>
				<div>
					<input
						name="ort"
						readonly
						bind:value={gebaeude.ort}
						type="text"
					/>
				</div>
			</div>
			<!-- Wohnfläche -->
			<div class="form-group col-md-4">
				<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"
						maxlength="4"
						type="number"
						required
						autocomplete="off"
						minlength="2"
						bind:value={gebaeude.flaeche}
					/>
				</div>
			</div>

			<!-- Keller -->
			<div class="form-group col-md-4">
				<Label>Keller *</Label>
				<div>
					<select
						name="keller"
						required
						bind:value={gebaeude.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-4">
				<Label>Dachgeschoss *</Label>
				<div>
					<select name="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>
		</div>

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

		<div class="GRB">
			<Verbrauch bind:ausweis bind:gebaeude />
		</div>
		<hr>
		<div class="flex flex-row gap-4">
			<div class="GRB">
				<div class="flex flex-col gap-4">
					<div>
						<HelpLabel title="Gebäudestrom">
							Bitte geben Sie hier den Gesamtstromverbrauch der betrachteten Zeiträume in kWh ein. Bei dem Stromverbrauch der Heizung ist die Hilfsenergie gemeint, oder der Verbrauch von elektrischen Ergänzungsheizungen ( z.B. raumlufttechnische Anlagen).
						</HelpLabel>
					</div>
					<div class="grid grid-cols-3 gap-4">
						<div class="flex flex-col gap-2">
							<div class="flex flex-row items-center gap-4">
								<span>von</span>
								<input
									class="klima"
									value={moment(ausweis.startdatum)
										.format("MM.Y")}
									readonly
								/>
							</div>
							<div class="flex flex-row items-center gap-4">
								<span>von</span>
								<input
									class="klima"
									value={moment(ausweis.startdatum)
										.add("1", "years")
										.format("MM.Y")}
									readonly
								/>
							</div>
							<div class="flex flex-row items-center gap-4">
								<span>von</span>
								<input
									class="klima"
									value={moment(ausweis.startdatum)
										.add("2", "years")
										.format("MM.Y")}
									readonly
								/>
							</div>
						</div>
						<div class="flex flex-col gap-2">
							<div class="flex flex-row items-center gap-4">
								<span>bis</span>
								<input
									class="klima"
									value={moment(ausweis.startdatum)
										.add("1", "years")
										.format("MM.Y")}
									readonly
								/>
							</div>
							<div class="flex flex-row items-center gap-4">
								<span>bis</span>
								<input
									class="klima"
									value={moment(ausweis.startdatum)
										.add("2", "years")
										.format("MM.Y")}
									readonly
								/>
							</div>
							<div class="flex flex-row items-center gap-4">
								<span>bis</span>
								<input
									class="klima"
									value={moment(ausweis.startdatum)
										.add("3", "years")
										.format("MM.Y")}
									readonly
								/>
							</div>
						</div>
						<div class="flex flex-col gap-2">
							<div class="flex flex-row items-center gap-4">
								<span>Verbrauch</span>
								<input
									name="strom_1"
									type="number"
									bind:value={ausweis.strom_1}
									required
								/>
							</div>
							<div class="flex flex-row items-center gap-4">
								<span>Verbrauch</span>
								<input
									name="strom_2"
									type="number"
									bind:value={ausweis.strom_2}
									required
								/>
							</div>
							<div class="flex flex-row items-center gap-4">
								<span>Verbrauch</span>
								<input
									name="strom_3"
									type="number"
									bind:value={ausweis.strom_3}
									required
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="GRB">
				<div class="flex flex-col gap-4 w-full">
					<div>
						<HelpLabel title="Enthält Stromverbrauch für">
							Bitte geben Sie hier ein für welche technischen Gebäudekomponeten der Stromverbrauch angefallen ist. Sollte es zusätzliche Stromabnehmer geben die in dem angegebenen Verbrauch enthalten sind, dann setzen Sie den Haken bei Sonstige und benennen diese.
						</HelpLabel>
					</div>
					<div class="flex flex-row gap-4 justify-between">
						<label class="checkbox-inline"
								><input
									type="checkbox"
									name="stromverbrauch_enthaelt_heizung"
									bind:checked={ausweis.stromverbrauch_enthaelt_heizung}
								/>Heizung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="stromverbrauch_enthaelt_warmwasser"
									bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}
								/>Warmwasser</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="stromverbrauch_enthaelt_lueftung"
									bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}
								/>Lüftung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="stromverbrauch_enthaelt_beleuchtung"
									bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}
								/>Beleuchtung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="stromverbrauch_enthaelt_kuehlung"
									bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}
								/>Kühlung</label
							>
					</div>
					<label class="checkbox-inline"
						>Sonstige:<input
							type="text"
							name="stromverbrauch_enthaelt_sonstige"
							bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
						/></label
					>
				</div>
			</div>
		</div>
		<hr />
		<div>
			<div>
				<div class="GRB">
					<!-- Anteil WW enthalten -->
					<div class="flex flex-row items-center gap-6">
						<label class="radio-inline"
							><input
								type="checkbox"
								name="warmwasser_enthalten"
								bind:checked={ausweis.warmwasser_enthalten}
							/>Warmwasser im Heizverbrauch enthalten:*</label
						>
					</div>

					<div class="flex flex-row gap-4">
						<!-- 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"
							maxlength="2"
							type="number"
							bind:value={ausweis.anteil_warmwasser_1}
							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
							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"
							maxlength="2"
							type="number"
							bind:value={ausweis.anteil_warmwasser_2}
							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
							autocomplete="off"
						/>
					</div>
					</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"
									bind:checked={ausweis.alternative_heizung}
									value="Heizung"
								/>Heizung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="alternative_warmwasser"
									bind:checked={ausweis.alternative_warmwasser}
									value="Warmwasser"
								/>Warmwasser</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="alternative_lueftung"
									bind:checked={ausweis.alternative_lueftung}
									value="Lüftung"
								/>Lüftung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="alternative_kuehlung"
									bind:checked={ausweis.alternative_kuehlung}
									value="Kühlung"
								/>Kühlung</label
							>
						</div>
					</div>
				</div>

				<hr>
				<div class="GRB">
					<!-- Anteil WW enthalten -->
					<div class="flex flex-row items-center gap-6">
						<label class="radio-inline"
							><input
								type="checkbox"
								name="kuehlung_enthalten"
								bind:checked={ausweis.kuehlung_enthalten}
							/>Thermische Kühlung im Heizverbrauch enthalten *</label
						>
					</div>

					<!-- Warmwasser Antel -->
					<div class="flex flex-row gap-4">
						<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_kuehlung_1"
								maxlength="2"
								type="number"
								bind:value={ausweis.anteil_kuehlung_1}
								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
								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_kuehlung_2"
								maxlength="2"
								type="number"
								bind:value={ausweis.anteil_kuehlung_2}
								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
								autocomplete="off"
							/>
						</div>
					</div>
				</div>

				<hr />
				<div>
					<Label
						>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung,
						Kühlung und Leerstand</Label
					>
				</div>
				<div class="GRB grid grid-cols-5 gap-4">
					<!-- Gebäudetyp -->
					<div>
						<HelpLabel title="Gebäudetyp *"
							>Bitte wählen Sie hier den Gebäudetyp aus.
						</HelpLabel>
						<div>
							<select name="gebaeudetyp" required>
								{#each buildingTypes as type}
									<option value={type} selected={gebaeude.gebaeudetyp == type}>{type}</option>
								{/each}
							</select>
						</div>
					</div>
					<!-- Gebäudeteil -->
					<div>
						<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" 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" required>
								<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" required>
								<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" maxlength="2" type="number" />
						</div>
					</div>
				</div>

				<hr />
				<div class="form-group col-md-12">
					<Label
						>F - Bitte prüfen Sie hier die Angaben zum
						Sanierungszustand des Gebäudes</Label
					>
				</div>

				<BilderZusatzsysteme {ausweis} {gebaeude} bind:images />

				<div class="flex flex-row justify-between">
					<Hilfe />
					<button type="submit" class="button">Weiter</button>
				</div>
			</div>
		</div>
	</fieldset>
</form>
