<script lang="ts">
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
	import ThickArrowDown from "radix-svelte-icons/src/lib/icons/ThickArrowDown.svelte";
	import {
		BedarfsausweisWohnenClient,
		GebaeudeAufnahmeClient,
		GebaeudeClient,
		VerbrauchsausweisGewerbeClient,
		VerbrauchsausweisWohnenClient,
	} from "./types";
	import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";

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

	let maxPerformance = 250;

	/**
	 * We use linear interpolation to scale the value between the given boundaries.
	 */
	function centerValueBetweenBoundaries(
		value: number,
		newMinimum: number,
		newMaximum: number,
		oldMinimum: number = 0,
		oldMaximum: number = 100
	): number {
		// Calculate the center point of the current range
		const center = (oldMinimum + oldMaximum) / 2;

		// Shift the value to be centered around zero
		const shiftedValue = value - center;

		// Calculate the current range width
		const rangeWidth = oldMaximum - oldMinimum;

		// Calculate the new range width
		const newRangeWidth = newMaximum - newMinimum;

		// Calculate the scaling factor
		const scalingFactor = newRangeWidth / rangeWidth;

		// Scale the shifted value to fit within the new range
		const scaledValue = shiftedValue * scalingFactor;

		// Shift the scaled value back to the center of the new range
		const centeredValue = scaledValue + (newMaximum + newMinimum) / 2;

		return centeredValue;
	}

	let translation_1 = 0;
	let translation_2 = 0;
	$: {
		(async () => {
			const result = await endEnergieVerbrauchVerbrauchsausweis_2016({
				...ausweis,
				gebaeude_aufnahme_allgemein: {
					...gebaeude_aufnahme_allgemein,
					gebaeude_stammdaten: gebaeude,
				},
			});

			console.log(result, ausweis);

			if (!result) {
				return;
			}
			translation_1 = Math.max(
				0,
				Math.min(
					100,
					(result.endEnergieVerbrauchGesamt / maxPerformance) * 100
				)
			);
			translation_2 = Math.max(0, Math.min(100, result.primaerEnergieVerbrauchGesamt / maxPerformance * 100))
		})();
	}
</script>

<div class="w-full rounded-lg border-[#ffcc03] border-2 relative p-2">
	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
	<ThickArrowDown
		size={28}
		class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
			translation_1,
			50,
			-150,
			0,
			100
		)}%)"
	/>
	<ThickArrowUp
		size={28}
		class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
			translation_2,
			50,
			-150,
			0,
			100
		)}%)"
	/>
</div>
