<script lang="ts">
	import { updateTitle } from '$lib/util/title';
	import IconButton from '$lib/components/utils/IconButton.svelte';
	import { i18n } from '$lib/i18n';
	import api from '$lib/api';
	import type { VaultBlobMode } from '@upnd/upend/api';
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';

	let mode: VaultBlobMode | undefined = undefined;

	async function submitOptions() {
		if (!mode) return;
		await api.setVaultOptions({ blob_mode: mode });
		await api.refreshVault();
		goto('/');
	}

	onMount(async () => {
		const options = await api.getVaultOptions();
		mode = options.blob_mode;
	});

	updateTitle('Initial Setup');
</script>

<main>
	<h1>{$i18n.t('Vault Setup')}</h1>
	<section class="tree-mode">
		<h2>Scan mode</h2>
		<div class="icons">
			<div class="option">
				<IconButton
					name="copy-alt"
					outline
					on:click={() => (mode = 'Mirror')}
					active={mode === 'Mirror'}
				>
					Mirror
				</IconButton>
				<p>
					{$i18n.t('Groups are nested reflecting the original file directory structure.')}
				</p>
			</div>
			<div class="option">
				<IconButton
					name="checkbox-minus"
					outline
					on:click={() => (mode = 'Flat')}
					active={mode === 'Flat'}
				>
					Flat
				</IconButton>
				<p>
					{$i18n.t('All groups are created as direct descendants of the root group.')}
				</p>
			</div>
			<div class="option">
				<IconButton
					name="download"
					outline
					on:click={() => (mode = 'Incoming')}
					active={mode === 'Incoming'}
				>
					Incoming
				</IconButton>
				<p>
					{$i18n.t("New files are added to a group called 'Incoming'.")}
				</p>
			</div>
		</div>
	</section>
	<section class="icons">
		<IconButton name="log-in" outline disabled={!mode} on:click={() => submitOptions()}>
			{$i18n.t('Confirm and start scan')}
		</IconButton>
	</section>
</main>

<style lang="scss">
	main {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 4rem;
		padding: 4rem;
		gap: 4rem;
		border: 1px solid var(--foreground);
		border-radius: 1rem;
		background: var(--background-lighter);
	}

	h1,
	h2 {
		margin: 0;
		text-align: center;
	}

	.tree-mode .icons {
		display: flex;
		justify-content: center;
		margin-top: 2rem;
		gap: 2rem;
	}

	.icons {
		font-size: 3rem;
	}

	.option {
		display: flex;
		flex-basis: 33%;
		flex-direction: column;
		align-items: center;
	}

	p {
		font-size: initial;
		text-align: center;
	}
</style>
