<script lang="ts">
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
	import ThickArrowDown from "radix-svelte-icons/src/lib/icons/ThickArrowDown.svelte";
	import {
		BedarfsausweisWohnenClient,
		AufnahmeClient,
		ObjektClient,
		VerbrauchsausweisGewerbeClient,
		VerbrauchsausweisWohnenClient,
	} from "./types.js";
	import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";
	import { Enums } from "#lib/client/prisma";
	import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016 } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
	export let aufnahme: AufnahmeClient;
	export let objekt: ObjektClient;
	export let ausweisart: Enums.Ausweisart;

	let maxPerformance = {
		[Enums.Ausweisart.VerbrauchsausweisGewerbe]: 1000,
		[Enums.Ausweisart.VerbrauchsausweisWohnen]: 250,
		[Enums.Ausweisart.BedarfsausweisWohnen]: 250,
		[Enums.Ausweisart.BedarfsausweisGewerbe]: 250
	}[ausweisart];

	/**
	 * 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 () => {
			let result;
			if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen) {
				result = await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt);
			} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
				result = await endEnergieVerbrauchVerbrauchsausweisGewerbe_2016(ausweis, aufnahme, objekt);
			}

			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 id="performance-box" class="order-2 sm:order-1 w-full box relative px-0 sm:px-4 self-stretch grid grid-cols-1">

<div class="self-center relative">
	{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
		<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" />	
	{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
		<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-gewerbe.png" alt="Energieeffizienz Skala" />
	{/if}
	<ThickArrowDown
		size={28}
		class="fill-base-content absolute -top-1 sm:top-4 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 sm:bottom-4 transition-left duration-1000 ease-in-out"
		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
			translation_2,
			50,
			-150,
			0,
			100
		)}%)"
	/>
</div>


</div>