<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import Verbrauchslabel from "#components/labels/VerbrauchsLabel.svelte";
	import StromVerbrauchslabel from "#components/labels/StromVerbrauchslabel.svelte";
	import VerbrauchsHelpLabel from "#components/labels/VerbrauchsHelpLabel.svelte";
	import StromVerbrauchsHelpLabel from "#components/labels/StromVerbrauchsHelpLabel.svelte";
	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
	import moment from "moment";
	import fuelList from "./brennstoffListe.js";
	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
	import {
		AufnahmeClient,
		VerbrauchsausweisGewerbeClient,
	} from "./types.js";

	export let aufnahme: AufnahmeClient;
	export let ausweis: VerbrauchsausweisGewerbeClient;

	// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl.
	// Allerdings müssen wir auch berücksichtigen, dass wir drei folgende Jahre brauchen, also
	// kann der Nutzer nur 36 + 18 Monate zurückgehen.
	let availableDates: {
		year: number;
		month: number;
	}[] = [];

	let monthNames = [
		"Januar",
		"Februar",
		"März",
		"April",
		"Mai",
		"Juni",
		"Juli",
		"August",
		"September",
		"Oktober",
		"November",
		"Dezember",
	];
	
	const startDate = moment(
		aufnahme.erstellungsdatum || Date.now()
	)
		.subtract(4, "years")
		.subtract(6, "months");
	const endDate = moment(
		aufnahme.erstellungsdatum || Date.now()
	).subtract(3, "years");

	for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
		availableDates.push({
			year: m.year(),
			month: m.month(),
		});
	}

	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 = moment(ausweis.startdatum).month();
	let year = moment(ausweis.startdatum).year();

	$: {
		if (typeof month === "number" && typeof year === "number") {
			// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
			// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
			ausweis.startdatum = moment()
				.set("month", month)
				.set("year", year)
				.startOf("month")
				.add(2, "days")
				.toDate();
		}
	}

	$: {
		console.log(aufnahme.brennstoff_1);
		
	}

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

<div
	id="verbrauch"
	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
"
>
	<!-- primäre Heizquellen -->

	<!-- primäre Heizquellen -->
	<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 order-1 md:order-1 xl:order-1">
		<div class="input-standard">
			<Inputlabel title="Heizquellen"></Inputlabel>

			<div class="input-checkboxen">
				<div
					class="grid grid-cols-[25px_max-content] items-center justify-items-start"
				>
					<input
						id="primaere_heizquelle"
						type="checkbox"
						class="checkbox"
						name="primaere_heizquelle"
						checked={true}
					/>
					<label for="primaere_heizquelle">Heizquelle</label>
				</div>
	
			</div>
	
			<div class="help-label">
				<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
					Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
				Verbräuche öffnet sich dann.</HelpLabel>
			</div>
		</div>
		{#if !ausweis.zusaetzliche_heizquelle}
		<div class="input-standard">
			
			<div class="input-checkboxen">
			<div
				class="grid grid-cols-[25px_max-content] items-center justify-items-start"
			>
				
					<input
						id="zusaetzliche_heizquelle_1"
						type="checkbox"
						class="checkbox"
						name="zusaetzliche_heizquelle_1"
						bind:checked={ausweis.zusaetzliche_heizquelle}
						data-cy="zusaetzliche_heizquelle"
					/>
					<label
						for="zusaetzliche_heizquelle_1"
						class="cursor-pointer">zusätzl. Heizquelle</label
					>
			</div>
			</div>
			<div class="help-label">
				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
			</div>
		</div>
		{/if}

	</div>

	<!-- Zeitraum 1 -->

	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
		<div class="input-standard">
			<Inputlabel title="Start-Monat *"></Inputlabel>

			<select
				name="energieverbrauch_zeitraum_monat"
				class="rounded-tr-none rounded-br-none w-full m-0"
				bind:value={month}
				required
			>
				{#if year !== null}
					{#each availableDates.filter((date) => date.year == year) as date}
						<option value={date.month}
							>{monthNames[date.month]}</option
						>
					{/each}
				{:else}
					{#each Array.from(availableDates.reduce((a, c) => {
							a.add(c.month);
							return a;
						}, new Set())) as availableMonth}
						<option
							value={availableMonth}
							selected={month === availableMonth}
							>{monthNames[availableMonth]}</option
						>
					{/each}
				{/if}
			</select>

			<div class="help-label">
				<HelpLabel>Bitte geben Sie hier den <b>Startmonat der ersten Verbrauchsperiode</b> ein. Es sind nur Monate auswählbar, 
					die im zulässigen Zeitraum (Endzeitpunkt von Jahr 3 darf nicht älter als 18 Monate sein) liegen. Wählen Sie ein 
					aktuellerses Jahr um alle Monate zu sehen.
					</HelpLabel>
			</div>
		</div>

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

			<select
				name="energieverbrauch_zeitraum_jahr"
				class="rounded-tl-none rounded-bl-none w-full m-0"
				bind:value={year}
				required
			>
				{#each Array.from(availableDates.reduce((a, c) => {
						a.add(c.year);
						return a;
					}, new Set())) as year}
					<option
						value={year}
						selected={ausweis.startdatum?.getFullYear() === year}
						>{year}</option
					>
				{/each}
			</select>

			<div class="help-label">
				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
			</div>
		</div>
	</div>

	<!-- primäre Brennstoff und Einheiten * -->

	<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
		<div class="input-standard">
			<Inputlabel title="primär. Brennstoff *"></Inputlabel>

			<select
				class="rounded-e-none"
				name="brennstoff_1"
				data-cy="brennstoff_1"
				bind:value={aufnahme.brennstoff_1}
				required
			>
				<option disabled selected value={null}>Bitte auswählen</option>
				{#each Object.keys(fuelMap) as fuel}
					<option value={fuel}>{fuel}</option>
				{/each}
			</select>

			<div class="help-label">
				<HelpLabel>
					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
					<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie 
						den Primärenergiefaktor bei Ihrem Energieversorger</strong>  (meistens mit regenartivem Anteil)<br/>
					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
				</HelpLabel>
			</div>
		</div>

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

			<select
				class="rounded-s-none"
				name="einheit_1"
				data-cy="einheit_1"
				bind:value={ausweis.einheit_1}
				disabled={!aufnahme.brennstoff_1}
				required
			>
				<option disabled selected >Bitte auswählen</option>
				{#each fuelMap.hasOwnProperty(aufnahme.brennstoff_1) ? fuelMap[aufnahme.brennstoff_1] : [] as unit}
					<option value={unit}>{unit}</option>
				{/each}
			</select>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an. 
					Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
					Litern vor. Pellets oder Brennholz in kg.
				</HelpLabel>
			</div>
		</div>
	</div>

	<!-- Verbrauch 1 -->

	<div class="input-standard order-4 md:order-4 xl:order-4">
		<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>

		<input
			name="verbrauch_1"
			type="number"
			class:linked={abweichung.indexOf(1) > -1}
			bind:value={ausweis.verbrauch_1}
			required
		/>

		<div class="VerbrauchsEinheit">
			{#if ausweis.einheit_1 === "Bitte auswählen"}
			{:else if ausweis.einheit_1 != "Bitte auswählen"}
			{ausweis.einheit_1}
			{/if}
		</div>

		<div class="help-label">
			<HelpLabel>
				<VerbrauchsHelpLabel
					bind:ausweis
					bind:aufnahme
					addYear={1}
					heizquelle={1}
				></VerbrauchsHelpLabel>
			</HelpLabel>
		</div>
	</div>

	<!-- Verbrauch 2 -->

	<div class="input-standard order-5 md:order-5 xl:order-5">
		<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>

		<input
			name="verbrauch_2"
			type="number"
			class:linked={abweichung.indexOf(2) > -1}
			bind:value={ausweis.verbrauch_2}
			required
		/>
		<div class="VerbrauchsEinheit">
			{#if ausweis.einheit_1 === "Bitte auswählen"}
			{:else if ausweis.einheit_1 != "Bitte auswählen"}
			{ausweis.einheit_1}
			{/if}
		</div>

		<div class="help-label">
			<HelpLabel>
				<VerbrauchsHelpLabel
					bind:ausweis
					bind:aufnahme
					addYear={2}
					heizquelle={1}
				></VerbrauchsHelpLabel>
			</HelpLabel>
		</div>
	</div>

	<!-- Verbrauch 3 -->

	<div class="input-standard order-6 md:order-6 xl:order-6">
		<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>

		<input
			name="verbrauch_3"
			type="number"
			class:linked={abweichung.indexOf(3) > -1}
			bind:value={ausweis.verbrauch_3}
			required
		/>
		<div class="VerbrauchsEinheit">
			{#if ausweis.einheit_1 === "Bitte auswählen"}
			{:else if ausweis.einheit_1 != "Bitte auswählen"}
			{ausweis.einheit_1}
			{/if}
		</div>

		<div class="help-label">
			<HelpLabel>
				<VerbrauchsHelpLabel
					bind:ausweis
					bind:aufnahme
					addYear={3}
					heizquelle={1}
				></VerbrauchsHelpLabel>
			</HelpLabel>
		</div>
	</div>

	{#if ausweis.zusaetzliche_heizquelle}
		<div
			class="hidden xl:block col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"
		></div>

		<!-- zusätzliche Heizquelle -->

		<div class="input-standard order-10 md:order-10 xl:order-10">
			<Inputlabel title="zusätzl. Heizquelle"></Inputlabel>

			<div class="input-checkboxen">
				<div
					class="grid grid-cols-[40px_max-content] items-center justify-items-start"
				>
					<input
						id="zusaetzliche_heizquelle"
						type="checkbox"
						class="checkbox"
						name="zusaetzliche_heizquelle"
						bind:checked={ausweis.zusaetzliche_heizquelle}
					/>
					<label for="zusaetzliche_heizquelle" class="cursor-pointer"
						>zusätzliche Heizquelle</label
					>
				</div>
			</div>

			<div class="help-label">
				<HelpLabel>Hier sind die <b>Verbräuche einer zusätzlichen Heizquelle</b> 
					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben</HelpLabel>
			</div>
		</div>

		<div class="input-standard order-11 md:order-11 xl:order-11"></div>

		<!-- zusätzlicher Brennstoff und Einheiten *  -->

		<div class="grid grid-cols-2 gap-x-4 order-12 md:order-12 xl:order-12">
			<div class="input-standard">
				<Inputlabel title="zusätzl. Brennstoff *"></Inputlabel>

				<select
					class="rounded-e-none"
					name="brennstoff_2"
					data-cy="brennstoff_2"
					bind:value={aufnahme.brennstoff_2}
					required
				>
					<option disabled selected 
						>Bitte auswählen</option
					>
					{#each Object.keys(fuelMap) as fuel}
						<option value={fuel}>{fuel}</option>
					{/each}
				</select>

				<div class="help-label">
					<HelpLabel>
					<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
					<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
					<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
					<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
					<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
					<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
					<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie 
						den Primärenergiefaktor bei Ihrem Energieversorger</strong>  (meistens mit regenartivem Anteil)<br/>
					<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
					<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
					</HelpLabel>
				</div>
			</div>

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

				<select
					class="rounded-s-none"
					name="einheit_2"
					data-cy="einheit_2"
					bind:value={ausweis.einheit_2}
					disabled={!aufnahme.brennstoff_2}
					required
				>
					<option disabled selected 
						>Bitte auswählen</option
					>
					{#each fuelMap.hasOwnProperty(aufnahme.brennstoff_2) ? fuelMap[aufnahme.brennstoff_2] : [] as unit}
						<option value={unit}>{unit}</option>
					{/each}
				</select>

				<div class="help-label">
					<HelpLabel>
					Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an. 
					Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
					Litern vor. Pellets oder Brennholz in kg.
					</HelpLabel>
				</div>
			</div>
		</div>

		<!-- Verbrauch 4 -->

		<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
			<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>

			<input
				name="verbrauch_4"
				type="number"
				bind:value={ausweis.verbrauch_4}
				class:linked={abweichung.indexOf(4) > -1}
			/>
			<div class="VerbrauchsEinheit">
				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
			</div>

			<div class="help-label">
				<HelpLabel>
					<VerbrauchsHelpLabel
						bind:ausweis
						bind:aufnahme
						addYear={1}
						heizquelle={2}
					></VerbrauchsHelpLabel>
				</HelpLabel>
			</div>
		</div>

		<!-- Verbrauch 5 -->

		<div class="input-standard order-[14] md:order-[14] xl:order-[14]">
			<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>

			<input
				name="verbrauch_5"
				type="number"
				bind:value={ausweis.verbrauch_5}
				class:linked={abweichung.indexOf(5) > -1}
			/>
			<div class="VerbrauchsEinheit">
				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
			</div>

			<div class="help-label">
				<HelpLabel>
					<VerbrauchsHelpLabel
						bind:ausweis
						bind:aufnahme
						addYear={2}
						heizquelle={2}
					></VerbrauchsHelpLabel>
				</HelpLabel>
			</div>
		</div>

		<!-- Verbrauch 6 -->

		<div class="input-standard order-[15] md:order-[15] xl:order-[15]">
			<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>

			<input
				name="verbrauch_6"
				type="number"
				bind:value={ausweis.verbrauch_6}
				class:linked={abweichung.indexOf(6) > -1}
			/>
			<div class="VerbrauchsEinheit">
				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
			</div>

			<div class="help-label">
				<HelpLabel>
					<VerbrauchsHelpLabel
						bind:ausweis
						bind:aufnahme
						addYear={3}
						heizquelle={2}
					></VerbrauchsHelpLabel>
				</HelpLabel>
			</div>
		</div>

	{/if}

	
	<div
	class="hidden xl:block col-span-3 order-[16] md:order-[16] xl:order-[16] h-[4px] bg-white mt-[-10px]">
</div>

<!-- StromVerbrauch 1 -->

<div class="input-standard order-[19] md:order-[19] xl:order-[19]">
	<StromVerbrauchslabel bind:ausweis addYear={1}></StromVerbrauchslabel>

		<input
			name="strom_1"
			type="number"
			bind:value={ausweis.strom_1}
			required
		/>

	<div class="VerbrauchsEinheit">
		kWh
	</div>

	<div class="help-label">
		<HelpLabel>
			<StromVerbrauchsHelpLabel
				bind:ausweis
				bind:aufnahme
				addYear={1}
				heizquelle={1}
			></StromVerbrauchsHelpLabel>
		</HelpLabel>
	</div>
</div>

<!-- StromVerbrauch 2 -->

<div class="input-standard order-[20] md:order-[20] xl:order-[20]">
	<StromVerbrauchslabel bind:ausweis addYear={2}></StromVerbrauchslabel>

		<input
			name="strom_2"
			type="number"
			bind:value={ausweis.strom_2}
			required
		/>
	<div class="VerbrauchsEinheit">
		kWh
	</div>

	<div class="help-label">
		<HelpLabel>
			<StromVerbrauchsHelpLabel
				bind:ausweis
				bind:aufnahme
				addYear={2}
				heizquelle={1}
			></StromVerbrauchsHelpLabel>
		</HelpLabel>
	</div>
</div>

<!-- StromVerbrauch 3 -->

<div class="input-standard order-[21] md:order-[21] xl:order-[21]">
	<StromVerbrauchslabel bind:ausweis addYear={3}></StromVerbrauchslabel>

		<input
			name="strom_3"
			type="number"
			bind:value={ausweis.strom_3}
			required
		/>
	<div class="VerbrauchsEinheit">
		kWh
	</div>

	<div class="help-label">
		<HelpLabel>
			<StromVerbrauchsHelpLabel
				bind:ausweis
				bind:aufnahme
				addYear={3}
				heizquelle={1}
			></StromVerbrauchsHelpLabel>
		</HelpLabel>
	</div>
</div>


</div>

<div class="bereich-box mt-6 grid
grid-cols-1 gap-x-4 gap-y-2
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>

<div class="col-span-1 sm:col-span-2 xl:col-span-3">Enthält Stromverbrauch für:</div>

<!-- Enthält Stromverbrauch für: -->

<SanierungsOption value="" label="Heizung" name="stromverbrauch_enthaelt_heizung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_heizung}></SanierungsOption>
<SanierungsOption value="" label="Warmwasser " name="stromverbrauch_enthaelt_warmwasser" help="" bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}></SanierungsOption>
<SanierungsOption value="" label="Lüftung " name="stromverbrauch_enthaelt_lueftung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}></SanierungsOption>
<SanierungsOption value="" label="Beleuchtung" name="stromverbrauch_enthaelt_beleuchtung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}></SanierungsOption>
<SanierungsOption value="" label="Kühlung" name="stromverbrauch_enthaelt_kuehlung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}></SanierungsOption>

<div class="input-standard mt-6 sm:mt-0">
	<Inputlabel title="Sonstige"></Inputlabel>

		<input
			name="stromverbrauch_enthaelt_sonstige"
			type="text"
			bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
		/>

	<div class="help-label">
		<HelpLabel>
		
		</HelpLabel>
	</div>
</div>


</div>

<style lang="postcss">
	.VerbrauchsEinheit {
		@apply absolute right-[4rem];
	}
</style>
