<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 | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
	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_stammdaten: gebaeude, gebaeude_aufnahme_allgemein}));

			if (!result) {
				return
			}
			//const primaerEnergieVerbrauch = (await ausweis.primaerEnergieBedarf);
			translation_1 = Math.max(0, Math.min(100, result.endEnergieVerbrauchGesamt / maxPerformance * 100))
			//translation_2 = Math.max(0, Math.min(100, primaerEnergieVerbrauch / 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>