<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 "../ZIPSearch.svelte";
	import { buildingTypes } from "./BuildingTypes";
	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
	import { VerbrauchsausweisGewerbe } from "src/lib/Ausweis/VerbrauchsausweisGewerbe";
	import moment from "moment";

	let ausweis = new VerbrauchsausweisGewerbe();

	let additionalHeating: boolean = false;
	let heatedWaterIncluded: boolean = false;
	let heatedWaterPortion: number = 18;
	let hasCellar: boolean = false;

	let area = 0;
	let zip: string = "";
	let city: string = "";

	let baujahrGebaeude: number;
	let baujahrHeizungsAnlage: number;
	let apartmentCount: number;
	let certificateReason:
		| "Vermietung"
		| "Neubau"
		| "Verkauf"
		| "Modernisierung"
		| "Sonstiges";
	let sanitationStatus: boolean;

	let needsRequirementCertificate: boolean = false;

	$: needsRequirementCertificate =
		(ausweis.baujahr_gebaeude < 1978 &&
			ausweis.anzahl_einheiten <= 4 &&
			ausweis.objekt_saniert == false &&
			(ausweis.ausstellgrund == "Vermietung" ||
				ausweis.ausstellgrund == "Sonstiges")) ||
		ausweis.ausstellgrund == "Neubau" ||
		ausweis.ausstellgrund == "Modernisierung" ||
		ausweis.ausstellgrund == "Verkauf";

	function automatischAusfüllen() {
		ausweis.baujahr_gebaeude = 1962;
		ausweis.baujahr_anlage = 1974;
		ausweis.objekt_saniert = true;
		ausweis.anzahl_einheiten = 1;
		ausweis.ausstellgrund = "Vermietung";
		ausweis.energieverbrauch_1_heizquelle_1 = 15000;
		ausweis.energieverbrauch_2_heizquelle_1 = 14000;
		ausweis.energieverbrauch_3_heizquelle_1 = 16000;
		ausweis.wohnflaeche = 152;
		ausweis.keller_beheizt = true;
		ausweis.energietraeger_1 = "Erdgas H";
		ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
		ausweis.warmwasser_enthalten = true;
		ausweis.anteil_warmwasser_1 = 18;
		ausweis.energieverbrauch_zeitraum = moment("12.01.2019");
		ausweis.objekt_plz = "21039";
		ausweis.objekt_ort = "Hamburg";
		ausweis.objekt_strasse = "Curslacker Deich 170";
	}
</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 />
</div>

<form method="post" action="/verbrauchsausweis/erstellen">
	<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 />

		<div
			class="flex flex-col p-4"
			class:hidden={!needsRequirementCertificate}
		>
			<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="IGstrasse"
						class=" strasse"
						type="text"
						autocomplete="off"
						required
						data-msg-minlength="min. 5 Zeichen"
						data-msg-maxlength="max. 40 Zeichen"
						bind:value={ausweis.objekt_strasse}
					/>
				</div>
			</div>

			<!-- PLZ -->
			<div class="form-group col-md-4 PLZ">
				<ZipSearch
					bind:zip={ausweis.objekt_plz}
					bind:city={ausweis.objekt_ort}
					name="zip"
				/>
			</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="IGort"
						
						readonly={true}
						bind:value={ausweis.objekt_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="IGflaeche"
						maxlength="4"
						type="number"
						required
						autocomplete="off"
						data-rule-minlength="2"
						data-msg-minlength="min. 2 Zeichen"
						bind:value={ausweis.wohnflaeche}
					/>
				</div>
			</div>

			<!-- Keller -->
			<div class="form-group col-md-4">
				<Label>Keller *</Label>
				<div>
					<select
						name="IGkeller"
						required
						bind:value={ausweis.keller_beheizt}
					>
						<option>Bitte auswählen</option>
						<option value={false}>nicht vorhanden</option>
						<option value={false}>unbeheizt</option>
						<option value={true}>beheizt</option>
					</select>
				</div>
			</div>

			<!-- Dachgeschoss -->
			<div class="form-group col-md-4">
				<Label>Dachgeschoss *</Label>
				<div>
					<select name="IGdach" class="" required>
						<option>Bitte auswählen</option>
						<option value="dnein">nicht vorhanden</option>
						<option value="dub">unbeheizt</option>
						<option value="dbh">beheizt</option>
					</select>
				</div>
			</div>
		</div>

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

		<div class="GRB">
			<Verbrauch bind:ausweis />
		</div>
		<hr />
		<div>
			<div>
				<div class="GRB">
					<!-- Anteil WW enthalten -->
					<div class="flex flex-col">
						<div class="flex flex-row gap-6">
							<label class="radio-inline"
								><input
									type="checkbox"
									class="IGwwbool"
									name="IGwwbool"
									bind:checked={heatedWaterIncluded}
								/>Warmwasser im Verbrauch enthalten</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="IGwarmwasser"
							maxlength="2"
							type="text"
							bind:value={heatedWaterPortion}
							disabled={!heatedWaterIncluded}
							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="IGwarmwasser2"
							maxlength="3"
							type="text"
							autocomplete="off"
							disabled={!additionalHeating}
						/>
					</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="IGversorgungssysteme1"
									value="Heizung"
								/>Heizung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="IGversorgungssysteme2"
									value="Warmwasser"
								/>Warmwasser</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="IGversorgungssysteme3"
									value="Lüftung"
								/>Lüftung</label
							>
							<label class="checkbox-inline"
								><input
									type="checkbox"
									name="IGversorgungssysteme4"
									value="Kühlung"
								/>Kühlung</label
							>
						</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="objekt_typ" required>
								{#each buildingTypes as type}
									<option value={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="objekt_gebaeudeteil" required>
								<option>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="lueftungskonzept" required>
								<option> 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="wird_gekuehlt" required>
								<option>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="text" />
						</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} />

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