<script lang="ts">
	import { Line } from "svelte-chartjs";
	import AggregatedFoodComp from "$lib/components/Energy/Aggregated/AggregatedFoodComp.svelte";
	import { main } from "$wails/models";
	import type { ChartData, Point } from "chart.js";
	import regression from "regression";
	import {
		CategoryScale,
		Chart as ChartJS,
		Legend,
		LinearScale,
		LineElement,
		PointElement,
		Title,
		Tooltip,
	} from "chart.js";
	import { CalculateR2 } from "$lib/utils";

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

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

	const defaultOptions = {
		backgroundColor: "rgba(59, 130, 246, 0.1)",
		borderColor: "rgb(59, 130, 246)",
		pointBorderColor: "rgb(59, 130, 246)",
		pointBackgroundColor: "rgb(255, 255, 255)",
		pointBorderWidth: 2,
		pointHoverRadius: 6,
		pointHoverBackgroundColor: "rgb(59, 130, 246)",
		pointHoverBorderColor: "rgb(255, 255, 255)",
		pointHoverBorderWidth: 2,
		pointRadius: 3,
		pointHitRadius: 20,
		tension: 0.4,
	};
	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",
			},
		],
	};
	data.datasets.push({
		...defaultOptions,
		label: "R2",
		data: CalculateR2(reversedItems.map((f, i) => [i, f.energy])),
		borderColor: "#04d1d1",
		pointBorderColor: "#04d1d1",
		pointRadius: 0,
	});
</script>

<template>
	<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
			<Line
				{data}
				options={{
					responsive: true,
					maintainAspectRatio: false,
					plugins: {
						legend: {
							position: "top",
							labels: {
								padding: 20,
								color: "rgb(229, 231, 235)",
								font: {
									size: 12,
									family: "'Nunito', sans-serif",
								},
							},
						},
					},
					scales: {
						y: {
							grid: {
								color: "rgba(75, 85, 99, 0.2)",
							},
							ticks: {
								color: "rgb(229, 231, 235)",
								font: {
									family: "'Nunito', sans-serif",
								},
							},
						},
						x: {
							grid: {
								color: "rgba(75, 85, 99, 0.2)",
							},
							ticks: {
								color: "rgb(229, 231, 235)",
								font: {
									family: "'Nunito', sans-serif",
								},
							},
						},
					},
				}}
				class="max-h-[50vh] h-[50vh]"
			/>
		</div>
		<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
			<div class="relative overflow-x-auto shadow-md rounded-lg">
				<table class="w-full text-sm text-left text-gray-400">
					<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
						<tr>
							<th class="px-6 py-4 font-semibold" scope="col">Period</th>
							<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
							<th class="px-6 py-4 font-semibold" scope="col">AvgPer100</th>
							<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-700">
						{#each items as f}
							<AggregatedFoodComp item={f} />
						{/each}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>
