<script>
import Spinner from "../util/Spinner.svelte";
import Euro from "../util/Euro.svelte"

let loading = false

let result = ""
let result_success = false

const update_subscription = async name => {
	loading = true

	const form = new FormData()
	form.append("subscription", name)
	try {
		const resp = await fetch(
			window.api_endpoint+"/user/subscription",
			{ method: "PUT", body: form },
		)
		if(resp.status >= 400) {
			let json = await resp.json()
			throw json.message
		}

		result_success = true
		result = "Subscription updated"

		setTimeout(() => {location.reload()}, 1000)
	} catch (err) {
		result_success = false
		result = "Failed to update subscription: "+err
		loading = false
	}
}

</script>

<div>
	{#if loading}
		<div class="spinner_container">
			<Spinner />
		</div>
	{/if}
	<div class="limit_width">
		<h2>Manage subscription</h2>
		<p>
			Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
		</p>
		<p>
			When your prepaid subscription is active you will be charged daily
			based on usage. Hotlink bandwidth is charged per TB based on the
			usage of the previous day. The amount charged for storage each day
			is your storage usage at the end of the day multiplied by the
			storage price (€4 / TB) and divided by the average number of days in
			a month (30.4375). So if you have exactly 1 TB on your account you
			will be charged €0.131416838 per day.
		</p>
		<p>
			The prepaid subscription will stay active for as long as you have
			credit on your account. When you reach negative balance the
			subscription will automatically end. You will need a positive
			balance to activate the subscription again.
		</p>

		{#if result !== ""}
			<div class:highlight_green={result_success} class:highlight_red={!result_success}>
				{result}
			</div>
		{/if}

		<div class="feat_table">
			<div>
				<div class="feat_label" class:feat_highlight={window.user.subscription.id === "prepaid"}>
					Prepaid<br/>
					{#if window.user.subscription.id === "prepaid"}
						Currently active
					{:else}
						<button on:click={() => {update_subscription("prepaid")}}>
							<i class="icon">attach_money</i>
							Activate
						</button>
					{/if}
				</div>
				<div class="feat_normal round_tr">
					<ul>
						<li>Base price of €2 per month</li>
						<li>€4 per TB per month for storage</li>
						<li>€2 per TB for hotlink bandwidth</li>
						<li>No bandwidth limit, your files will download at the highest speed possible</li>
					</ul>
				</div>
			</div>
			<div>
				<div class="feat_label" class:feat_highlight={window.user.subscription.id === "prepaid_storage"}>
					Prepaid (just storage)<br/>
					{#if window.user.subscription.id === "prepaid_storage"}
						Currently active
					{:else}
						<button on:click={() => {update_subscription("prepaid_storage")}}>
							<i class="icon">attach_money</i>
							Activate
						</button>
					{/if}
				</div>
				<div class="feat_normal">
					<ul>
						<li>Base price of €0.10 per month</li>
						<li>€4 per TB per month for storage</li>
						<li>No hotlink bandwidth (rate limiting will be enabled when a file uses too much bandwidth)</li>
						<li>You don't see ads, but people downloading your files do see ads</li>
					</ul>
				</div>
			</div>
			<div>
				<div class="feat_label" class:feat_highlight={window.user.subscription.id === ""}>
					Free<br/>
					{#if window.user.subscription.id === ""}
						Currently active
					{:else}
						<button on:click={() => {update_subscription("none")}}>
							<i class="icon">money_off</i>
							Activate
						</button>
					{/if}
				</div>
				<div class="feat_normal round_br">
					<ul>
						<li>Standard free plan, files expire after 30 days.</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
.spinner_container {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 100px;
	width: 100px;
	z-index: 1000;
}
.feat_table {
	display: flex;
	flex-direction: column;
}
.feat_table > div {
	display: flex;
	flex-direction: row;
}
.feat_table > div > div:first-child {
	flex: 0 0 25%;
	max-width: 25%;
}
.feat_table > div > div {
	flex: 1 1 0;
	margin: 0.25em;
	padding: 0.5em;
	word-wrap: break-word;
	hyphens: auto;
}
.feat_table > div > .feat_label {
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	background-color: var(--layer_1_color);
	font-size: 1.1em;
	color: #ffffff;
	text-shadow: 0 0 3px #000000;
}
.feat_table > div > .feat_normal {
	background-color: var(--layer_3_color);
	box-shadow: 1px 1px 3px -1px var(--shadow_color);
	text-shadow: 1px 1px 3px var(--shadow_color);
}
.feat_table > div > .feat_highlight {
	border: 1px solid var(--highlight_color)
}

.feat_table > div > div.round_tl { border-top-left-radius:     0.5em; }
.feat_table > div > div.round_tr { border-top-right-radius:    0.5em; }
.feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }
.feat_table > div > div.round_bl { border-bottom-left-radius:  0.5em; }

</style>
