<script>
	import TransactionList from '$lib/transactionList.svelte';
	import Budgetlist from '$lib/budgetlist.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 orphanedTransactions = $derived(data.orphanedTransactions);
</script>

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

{#each budgets as budget}
	<a
		href="/budget/{budget.id}"
		class="block p-4 mb-2 bg-base-200 rounded-lg hover:bg-base-300 transition duration-200"
		><div class="flex flex-row justify-between items-center text-2xl">
			<div>{budget.name}</div>
			<div>{budget.sum}</div>
		</div></a
	>
{/each}

<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} />

<div class="text-xl divider">Orphans</div>
<Budgetlist transactions={orphanedTransactions} />
