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

	import ZipSearch from "#components/PlzSuche.svelte";
	import { Enums } from "#lib/client/prisma.js";
	import { AufnahmeClient, ObjektClient } from "./types.js";

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

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

<div
	id="gebaeudedaten"
	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
"
>
	<!-- Straße, Hausnummer * -->

	<div class="input-standard order-1 md:order-1 xl:order-1">
		<Inputlabel title="Straße, Hausnummer *"></Inputlabel>

		<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={objekt.adresse}
		/>

		<div class="help-label">
			<HelpLabel>
				Straße und Hausnummer des betrachteten Gebäudes. Die Angaen
				werden auf dem Energieausweis vermerkt.
			</HelpLabel>
		</div>
	</div>

	<!-- PLZ / ORT -->

	<div
		class="grid grid-cols-[2fr_6fr] gap-x-4 order-2 md:order-2 xl:order-2 relative"
	>
		<div class="input-noHelp">
			<Inputlabel title="PLZ *"></Inputlabel>

			<ZipSearch
				bind:zip={objekt.plz}
				bind:city={objekt.ort}
				name="plz"
			/>
		</div>

		<div class="input-standard">
			<Inputlabel title="Ort *"></Inputlabel>

			<input
				name="ort"
				data-test="ort"
				readonly={false}
				required
				bind:value={objekt.ort}
				type="text"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die PLZ des betrachteten Gebäudes ein, der
					Ort wird dann angezeigt und kann ausgewählt werden. Die
					Angaen werden auf dem Energieausweis vermerkt.
				</HelpLabel>
			</div>
		</div>
	</div>

	{#if ausweisart == "VerbrauchsausweisWohnen"}
		<!-- Wohnfläche m² * -->

		<div class="input-standard order-3 md:order-3 xl:order-3">
			<Inputlabel title="Wohnfläche m² *"></Inputlabel>

			<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={aufnahme.flaeche}
			/>

			<div class="help-label">
				<HelpLabel>
					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>
		</div>
	{/if}

	<!-- Dachgeschoss *-->

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

		<select
			name="dachgeschoss"
			data-test="dachgeschoss"
			bind:value={aufnahme.dachgeschoss}
			required
		>
			<option disabled selected value={null}>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 class="help-label">
			<HelpLabel>
				Bei Obergeschoss mit vorhandenen Dachschrägen oder ausgebautem
				Dachgeschoss beheizt auswählen. Bei Kaltdächern oder
				unausgebautem Dachgeschoss bitte unbeheizt auswählen. Bei
				Flachdächern wird nicht vorhanden ausgewählt.
			</HelpLabel>
		</div>
	</div>

	<!-- Keller * -->

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

		<select
			name="keller"
			data-test="keller"
			required
			bind:value={aufnahme.keller}
		>
			<option disabled selected value={null}>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 class="help-label">
			<HelpLabel>
				Diese Angabe hat folgenden Einfluss.<br />
				<b>Keller beheizt:<br />Nutzfläche = Wohnfläche x 1,35.</b>
				<b>Keller unbeheizt:<br />Nutzfläche = Wohnfläche x 1,2.</b>
				Dies ist nur zulässig wenn die Nutzfläche unbekannt ist. Geben Sie
				diese daher unbedingt im nächsten Feld ein wenn bekannt.
			</HelpLabel>
		</div>
	</div>

	<!-- Gesamtfläche * -->

	<div class="input-standard order-6 md:order-6 xl:order-6">
		<Inputlabel title="Nutzfläche m² *"></Inputlabel>

		<input
			name="nutzflaeche"
			data-test="nutzflaeche"
			maxlength="4"
			type="number"
			required
			bind:value={aufnahme.nutzflaeche}
		/>

		<div class="help-label">
			<HelpLabel>
				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). <b
					>Diese Fläche wird dann im Energieausweis als energetische
					Nutzfläche (An) ausgewiesen.</b
				>
			</HelpLabel>
		</div>
	</div>
</div>
