<script lang="ts">
	import { dailyFoodStore } from "$lib/store/Energy/dailyFoodStore";
	import { monthlyFoodStore } from "$lib/store/Energy/monthlyFoodStore";
	import { weeklyFoodStore } from "$lib/store/Energy/weeklyFoodStore";
	import { yearlyFoodStore } from "$lib/store/Energy/yearlyFoodStore";
	import { dailyWeightStore } from "$lib/store/Weight/dailyWeightStore";
	import { monthlyWeightStore } from "$lib/store/Weight/monthlyWeightStore";
	import { weeklyWeightStore } from "$lib/store/Weight/weeklyWeightStore";
	import { yearlyWeightStore } from "$lib/store/Weight/yearlyWeightStore";
	import { faRefresh } from "@fortawesome/free-solid-svg-icons";
	import Fa from "svelte-fa";
	Fa;

	// YES refresh DOES exist FFS
	function refreshStores() {
		// @ts-ignore
		dailyFoodStore.refresh();
		// @ts-ignore
		weeklyFoodStore.refresh();
		// @ts-ignore
		monthlyFoodStore.refresh();
		// @ts-ignore
		yearlyFoodStore.refresh();
		// @ts-ignore
		dailyWeightStore.refresh();
		// @ts-ignore
		weeklyWeightStore.refresh();
		// @ts-ignore
		monthlyWeightStore.refresh();
		// @ts-ignore
		yearlyWeightStore.refresh();
	}
</script>

<template>
	<!-- svelte-ignore a11y-click-events-have-key-events -->
	<div class="absolute right-20 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={refreshStores}>
		<button>
			<Fa icon={faRefresh} scale={2} />
		</button>
	</div>
</template>
