<script lang="ts">
	import HelpLabel from "../HelpLabel.svelte";
	import moment from "moment";
	import Label from "../Label.svelte";
	import fuelList from "./brennstoffListe";
	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung";
	import type { VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
	import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";

	let availableYears = [
		2018, 2019,
	];
	let availableMonths = [
		"Januar",
		"Februar",
		"März",
		"April",
		"Mai",
		"Juni",
		"Juli",
		"August",
		"September",
		"Oktober",
		"November",
		"Dezember",
	];

	export let gebaeude: GebaeudeClient;
	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe;

	const fuelMap: Record<string, string[]> = {};
	for (const fuel of fuelList) {
		// fuelMap[fuel.energietraeger] = ...
		fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
		fuelMap[fuel[0]].push(fuel[1]);
	}

	let month: string = "01";
	let year: string = "2018";

	$: {
		if (month && year) {
			ausweis.startdatum = moment(`${month}.01.${year}`).toDate();
		}
	}

	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
</script>

<div class="w-full flex flex-col gap-4">
	<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
		<div>
			<HelpLabel title="zusätzliche Heizquelle">
				Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
				zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
				Verbrauchszeiträume wie bei der primären Heizung verwendet
				werden.
			</HelpLabel>
			<input
				type="checkbox"
				class="checkbox"
				name="zusaetzliche_heizquelle"
				bind:checked={ausweis.zusaetzliche_heizquelle}
			/>
		</div>

		<div>
			<HelpLabel title="Brennstoff *">
				<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
				entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
				<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
				unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
				zu Erdgas L einen leicht höheren Methangehalt, und daher einen
				etwas besseren Brennwert.<br /><br />
				<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
				bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
				bleiben.<br /><br />
				<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
				Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
				/><br />
				<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
				oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
				werden.<br /><br />
				<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
				zerkleinertes Holz.<br /><br />
				<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
				über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
				Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
				Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
				dezentral realisiert.<br /><br />
				<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
				<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
			</HelpLabel>
			<div>
				<select name="brennstoff_1" required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}>
					<option disabled>Bitte auswählen</option>
					{#each Object.keys(fuelMap) as fuel}
						<option value={fuel}>{fuel}</option>
					{/each}
				</select>
			</div>
		</div>

		<div>
			<HelpLabel title="Einheit *">
				Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
				Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
				vor. Pellets oder Brennholz in SRm (Schüttraummetern).
			</HelpLabel>
			<div>
				<select
					name="einheit_1"
					required
					bind:value={ausweis.einheit_1}
				>
					<option disabled>Bitte auswählen</option>
					{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
						<option value={unit}>{unit}</option>
					{/each}
				</select>
			</div>
		</div>

		<div>
			<Label>Brennstoff *</Label>
			<div>
				<select
					name="brennstoff_2"
					bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
					disabled={!ausweis.zusaetzliche_heizquelle}
					required
				>
					<option disabled> Bitte auswählen</option>
					{#each Object.keys(fuelMap) as fuel}
						<option value={fuel}>{fuel}</option>
					{/each}
				</select>
			</div>
		</div>

		<div>
			<Label>Einheit *</Label>
			<div>
				<select
					name="einheit_2"
					disabled={!ausweis.zusaetzliche_heizquelle}
					bind:value={ausweis.einheit_2}
					required
				>
					<option disabled>Bitte auswählen</option>
					{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
						<option value={unit}>{unit}</option>
					{/each}
				</select>
			</div>
		</div>
	</div>

	<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
		<div class="flex flex-col gap-2">
			<div class="column">
				<span>von</span>
				<select
					name="energieverbrauch_zeitraum_monat"
					class="rounded-tr-none rounded-br-none w-full m-0"
					bind:value={month}
					required
				>
					<option>auswählen</option>
					{#each availableMonths as m, i}
						<option value={i + 1}>{m}</option>
					{/each}
				</select>

				<select
					name="energieverbrauch_zeitraum_jahr"
					class="rounded-tl-none rounded-bl-none w-full m-0"
					bind:value={year}
					required
				>
					<option>auswählen</option>
					{#each availableYears as y}
						<option value={y}>{y}</option>
					{/each}
				</select>
			</div>
			<div class="column">
				<span>von</span>
				<input
					class="klima"
					value={moment(ausweis.startdatum)
						.add("1", "year")
						.format("MM.Y")}
					readonly
				/>
			</div>
			<div class="column">
				<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="column">
				<span>bis</span>
				<input
					
					value={moment(ausweis.startdatum)
						.add("1", "year")
						.format("MM.Y")}
					readonly
				/>
			</div>
			<div class="column">
				<span>bis</span>
				<input
					
					value={moment(ausweis.startdatum)
						.add("2", "years")
						.format("MM.Y")}
					readonly
				/>
			</div>
			<div class="column">
				<span>bis</span>
				<input
					
					value={moment(ausweis.startdatum)
						.add("3", "years")
						.format("MM.Y")}
					readonly
				/>
			</div>
		</div>
		<div class="flex flex-col gap-2">
			<div class="column">
				<span>Verbrauch</span>
				<input
					name="verbrauch_1"
					type="number"
					class:linked={abweichung.indexOf(1) > -1}
					bind:value={ausweis.verbrauch_1}
					required
				/>
			</div>
			<div class="column">
				<span>Verbrauch</span>
				<input
					name="verbrauch_2"
					type="number"
					class:linked={abweichung.indexOf(2) > -1}
					bind:value={ausweis.verbrauch_2}
					required
				/>
			</div>
			<div class="column">
				<span>Verbrauch</span>
				<input
					name="verbrauch_3"
					type="number"
					class:linked={abweichung.indexOf(3) > -1}
					bind:value={ausweis.verbrauch_3}
					required
				/>
			</div>
		</div>
		<div class="flex flex-col gap-2">
			<div class="column">
				<span>Verbrauch</span>
				<input
					name="verbrauch_4"
					type="number"
					bind:value={ausweis.verbrauch_4}
					class:linked={abweichung.indexOf(4) > -1}
					disabled={!ausweis.zusaetzliche_heizquelle}
				/>
			</div>
			<div class="column">
				<span>Verbrauch</span>
				<input
					name="verbrauch_5"
					type="number"
					bind:value={ausweis.verbrauch_5}
					class:linked={abweichung.indexOf(5) > -1}
					disabled={!ausweis.zusaetzliche_heizquelle}
				/>
			</div>
			<div class="column">
				<span>Verbrauch</span>
				<input
					name="verbrauch_6"
					type="number"
					bind:value={ausweis.verbrauch_6}
					class:linked={abweichung.indexOf(6) > -1}
					disabled={!ausweis.zusaetzliche_heizquelle}
				/>
			</div>
		</div>
	</div>
</div>

<style>
	.column {
		@apply flex flex-row items-center gap-4;
	}
</style>
