<script>
import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
import Button from "../layout/Button.svelte";
import Euro from "../util/Euro.svelte";
import { formatDataVolume } from "../util/Formatting.svelte";

let button
let dialog

const open = () => {
	dialog.showModal()

	let rect = button.getBoundingClientRect()
	dialog.style.top = Math.round(rect.bottom) + "px"
	dialog.style.left = Math.round(rect.left) + "px"
}

// Close the dialog when the user clicks the background
const click = e => {
	if (e.target === dialog) {
		dialog.close()
	}
}
</script>

<div class="wrapper">
	<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu">
		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
		<span>
			{window.user.username === "" ? "Pixeldrain" : window.user.username}
		</span>
	</button>
</div>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog bind:this={dialog} on:click={click}>
	<div class="menu">
		{#if window.user.username !== ""}
			<div class="stats_table">
				<div>Subscription</div>
				<div>{window.user.subscription.name}</div>

				{#if window.user.subscription.type === "prepaid"}
					<div>Credit</div>
					<div><Euro amount={window.user.balance_micro_eur}/></div>
				{/if}

				<div>Storage used</div>
				<div>{formatDataVolume(window.user.filesystem_storage_used, 3)}</div>
				<div>Transfer used</div>
				<div>{formatDataVolume(window.user.monthly_transfer_used, 3)}</div>
			</div>
			<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
			<Button link_href="/user" icon="person" label="Profile"/>
			<Button link_href="/user/settings" icon="settings" label="Settings"/>
			<Button link_href="/user/subscription" icon="shopping_cart" label="Subscription"/>
			<Button link_href="/user/prepaid/transactions" icon="receipt" label="Transactions"/>
		{:else}
			<Button link_href="/" icon="home" label="Home"/>
			<Button link_href="/#pro" icon="star" label="Get Premium"/>
			<Button link_href="/login" icon="person" label="Log in"/>
			<Button link_href="/register" icon="person" label="Register"/>
		{/if}
	</div>
</dialog>

<style>
.wrapper {
	flex-grow: 0;
	flex-shrink: 0;
	display: inline;
	align-self: center;
}

.button {
	flex: 0 0 content;
	background: none;
	margin: 0;
	color: var(--body_text_color);
	box-shadow: none;
}

dialog {
	background-color: var(--card_color);
	color: var(--body_text_color);
	border-radius: 8px;
	border: none;
	padding: 4px;
	margin: 0;
	box-shadow: 2px 2px 10px var(--shadow_color);
}
.menu {
	display: flex;
	flex-direction: column;
}
.stats_table {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.2em 1em;
	margin: 3px;
}
</style>
