<script lang="ts">
	import { Line } from 'svelte-chartjs'
	import type { AggregatedFood } from '$lib/database/food'
	import AggregatedFoodComp from '$components/AggregatedFood/AggregatedFoodComp.svelte'
	import type { ChartData, Point } from 'chart.js'
	import {
		CategoryScale,
		Chart as ChartJS,
		Legend,
		LinearScale,
		LineElement,
		PointElement,
		Title,
		Tooltip
	} from 'chart.js'

	ChartJS.register(
		Title,
		Tooltip,
		Legend,
		LineElement,
		LinearScale,
		PointElement,
		CategoryScale
	)

	export let items: AggregatedFood[] = []
	export let energyTarget: number = 2000
	export let energyLimit: number = 2500
	let reversedItems = items.slice().reverse()

	const defaultOptions = {
		backgroundColor: 'rgba(225, 204,230, .3)',
		borderColor: 'rgb(205, 130, 158)',
		pointBorderColor: 'rgb(205, 130, 158)',
		pointBackgroundColor: 'rgb(255, 255, 255)',
		pointBorderWidth: 10,
		pointHoverRadius: 5,
		pointHoverBackgroundColor: 'rgb(0, 157, 123)',
		pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
		pointHoverBorderWidth: 2,
		pointRadius: 1,
		pointHitRadius: 10
	}
	const data: ChartData<'line', (number | Point)[]> = {
		labels: reversedItems.map(f => f.period),
		datasets: [
			{
				...defaultOptions,
				label: 'Amount',
				data: reversedItems.map(f => f.amount),
				borderColor: '#ff4dff',
				pointBorderColor: '#ff4dff',
			},
			{
				...defaultOptions,
				label: 'AvgPer100',
				data: reversedItems.map(f => f.avgPer100),
				borderColor: '#ffb84d',
				pointBorderColor: '#ffb84d',
			},
			{
				...defaultOptions,
				label: 'Energy',
				data: reversedItems.map(f => f.energy),
				borderColor: '#b8ff4d',
				pointBorderColor: '#b8ff4d',
			},
			{
				...defaultOptions,
				label: 'Target',
				data: reversedItems.map(f => energyTarget),
				borderColor: '#00ff00',
				pointBorderColor: '#00ff00',
			},
			{
				...defaultOptions,
				label: 'Limit',
				data: reversedItems.map(f => energyLimit),
				borderColor: '#ff0000',
				pointBorderColor: '#ff0000',
			}
		]
	}
</script>

<template>
	<Line data="{data}" />
	<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
		<div class="relative overflow-x-auto 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" scope="col">
						Period
					</th>
					<th class="px-6 py-3" scope="col">
						Amount
					</th>
					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
						AvgPer100
					</th>
					<th class="px-6 py-3" scope="col">
						Energy
					</th>
				</tr>
				</thead>
				<tbody>
				{#each items as f}
					<AggregatedFoodComp item="{f}" />
				{/each}
				</tbody>
			</table>
		</div>
		<div>
		</div>
	</div>
</template>
