<script lang="ts">
	import { GenerateColor, RemoveExistingColors } from "$lib/utils";
	import EmptyWeightComp from "$components/Weight/EmptyWeightComp.svelte";
	import WeightComp from "$components/Weight/WeightComp.svelte";
	import { main } from "$wails/models";

	export let items: main.Weight[] = [];
	RemoveExistingColors();

	const dateColors: Map<string, string> = new Map<string, string>();

	function getDateColor(item: main.Weight): string {
		if (!item) return GenerateColor();
		if (!item.date) return GenerateColor();
		const date = item.date.toString().split("T")[0];
		if (!date) return GenerateColor();
		if (!dateColors.has(date)) dateColors.set(date, GenerateColor());
		// THERE'S NOTHING UNDEFINED HERE
		// WE GOT RID OF UNDEFINED ON LINE 33
		// ASSHOLE
		// @ts-ignore
		return dateColors.get(date);
	}
</script>

<template>
	<div class="relative flex flex-col flex-grow h-[93vh]" data-vaul-drawer-wrapper id="page">
		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
					<tr>
						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
						<th class="px-6 py-3 w-10/12" scope="col"> Weight </th>
					</tr>
				</thead>
				<tbody>
					<EmptyWeightComp />
					{#each items as f}
						<WeightComp item={f} dateColor={getDateColor(f)} />
					{/each}
				</tbody>
			</table>
		</div>
		<div></div>
	</div>
</template>
