<script lang="ts">
import Button from "layout/Button.svelte"
import { onMount } from "svelte";
import CardAccount from "./CardAccount.svelte";
import CardStatistics from "./CardStatistics.svelte";
import CardSubscription from "./CardSubscription.svelte";
import CardUsage from "./CardUsage.svelte";
import CardActivity from "./CardActivity.svelte";
import CardPrepaidTransactions from "./CardPrepaidTransactions.svelte";
import AddressReputation from "home_page/AddressReputation.svelte";
import { flip } from "svelte/animate";

let cards = $state([])

const save = () => {
	let storage = {
		size: {},
		order: [],
	}

	for (const card of cards) {
		if (card.size !== undefined && card.size !== 1) {
			storage.size[card.id] = card.size
		}
		storage.order.push(card.id)
	}

	window.localStorage.setItem("dashboard_layout", JSON.stringify(storage))
}

const min_card_size = 0
const def_card_size = 1
const max_card_size = 3

const expand = (i: number) => {
	if (cards[i].size === undefined) {
		cards[i].size = def_card_size
	}
	if (cards[i].size < max_card_size) {
		cards[i].size++
	}
	save()
}
const shrink = (i: number) => {
	if (cards[i].size === undefined) {
		cards[i].size = def_card_size
	}
	if (cards[i].size > min_card_size) {
		cards[i].size--
	}
	save()
}

const swap_card = (idx1: number, idx2: number) => {
	const card1 = cards[idx1]
	cards[idx1] = cards[idx2]
	cards[idx2] = card1
	save()
}

onMount(() => {
	cards = [
		{
			id: "account",
			elem: CardAccount,
			title: "Account",
			link: "/user/settings",
		},{
			id: "subscription",
			elem: CardSubscription,
			title: "Subscription",
			link: "/user/subscription",
		}, {
			id: "prepaid_transactions",
			elem: CardPrepaidTransactions,
			title: "Prepaid transactions",
			link: "/user/prepaid/transactions",
		}, {
			id: "usage",
			elem: CardUsage,
			title: "Usage",
		}, {
			id: "statistics",
			elem: CardStatistics,
			title: "Statistics",
		}, {
			id: "activity",
			elem: CardActivity,
			title: "Activity",
			link: "/user/activity",
		}
	]

	// Apply the view settings from localstorage
	try {
		const layout = JSON.parse(window.localStorage.getItem("dashboard_layout"))

		for (const card of cards) {
			if (
				layout !== null &&
				layout.size !== undefined &&
				layout.size[card.id] !== undefined
			) {
				card.size = layout.size[card.id]
			} else {
				card.size = 1
			}
		}

		if (layout.order !== undefined && layout.order instanceof Array) {
			cards.sort((card1, card2) => {
				return layout.order.indexOf(card1.id) - layout.order.indexOf(card2.id)
			})
		}
	} catch (err) {
		console.warn("Failed to load dashboard settings", err)
		return
	}
})
</script>

<div class="separator"></div>

<AddressReputation/>

<div class="cards">
	{#each cards as card, i (card.id)}
		<div
			animate:flip={{duration: 250}}
			class="card bubble"
			class:size_1={card.size === 1}
			class:size_2={card.size === 2}
			class:size_3={card.size === 3}
		>
			<div class="title_box">
				{#if card.link}
					<h2>
						<a href={card.link}>
							{card.title}
						</a>
					</h2>
				{:else}
					<h2>{card.title}</h2>
				{/if}

				{#if i > 0}
					<Button click={() => swap_card(i, i-1)} icon="chevron_left" flat/>
				{/if}
				{#if i < cards.length-1}
					<Button click={() => swap_card(i, i+1)} icon="chevron_right" flat/>
				{/if}

				<Button click={() => shrink(i)} icon="zoom_out" flat/>
				<span>
					{card.size === undefined ? 1 : card.size}
				</span>
				<Button click={() => expand(i)} icon="zoom_in" flat/>
			</div>

			{#if !card.hidden && card.size > 0}
				<div class="card_component">
					<card.elem card_size={card.size}/>
				</div>
			{/if}
		</div>
	{/each}
</div>

<style>
.separator {
	margin: 0 8px;
}
.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 0;
	margin: 0 4px;
}
.card {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	text-align: initial;
	margin: 0;
}
.card_component {
	flex: 1 1 auto;
	overflow: auto;
	padding: 6px;
}
.size_1 {
	width: 500px;
}
.size_1 > .card_component {
	max-height: 400px;
}
.size_2 {
	width: 1008px; /* Add 8px to account for gap between cards */
}
.size_2 > .card_component {
	max-height: 600px;
}
.size_3 {
	width: 1516px; /* Add 16px to account for two gaps between cards */
}
.size_3 > .card_component {
	max-height: 800px;
}

.title_box {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid var(--separator);
}
.title_box > h2 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.5em;
	border-bottom: none;
	padding-left: 0.2em;
}
.title_box > h2 > a {
	border-bottom: none;
	text-decoration: none;
}
</style>
