<script>
	import TransactionList from '$lib/transactionList.svelte';
	import { echarts } from '$lib/echarts';

	let { data } = $props();
	let total = $derived(data.total);
	let unallocatedTrans = $derived(data.unallocatedTrans);
	let underAllocatedTrans = $derived(data.underAllocatedTrans);
	let budgets = $derived(data.budgets);
	let budgetTransactions = $derived(data.budgetTransactions);
	let last30days = $derived(data.last30DaysTransactionsSums.reverse());

	let chartData = $derived(
		last30days.reduce(
			(acc, curr) => [...acc, acc[acc.length - 1] + Number(curr.sum)],
			[Number(total)]
		)
	);

	let chartDates = $derived([
		'now',
		...last30days.map((day) => `${day.date.getMonth() + 1}/${day.date.getDate()}`)
	]);

	const option = $derived({
		xAxis: {
			type: 'category',
			data: chartDates
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: chartData,
				type: 'line',
				label: {
					show: false,
					position: 'top',
					formatter: (params) => {
						return `$${params.value.toFixed(2)}`;
					},
					fontSize: 20,
					padding: 10,
					backgroundColor: 'rgba(255, 255, 255, 0.8)',
					borderRadius: 5
				},
				emphasis: {
					label: {
						show: true // Labels appear on hover
					}
				}
			}
		]
	});
</script>

<span class="font-sans text-xl"
	>Total Net Worth: <span class="{total > 0 ? 'bg-green-500' : 'bg-red-500'} pl-2 pr-2 rounded-lg"
		>${total}</span
	></span
>

<div class="container" use:echarts={option} />

<div class="text-xl divider">Unallocated Transactions</div>
<TransactionList {budgets} {budgetTransactions} transactions={unallocatedTrans} />

<div class="text-xl divider">Underallocated Transactions</div>
<TransactionList {budgets} {budgetTransactions} transactions={underAllocatedTrans} />

<style>
	.container {
		height: 500px;
		width: 100%;
	}
</style>
