<script lang="ts">
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { importState } from '$lib/stores.svelte';
	import * as Card from '$lib/components/ui/card/index.js';
	import { Input } from '$lib/components/ui/input';
	import * as Select from '$lib/components/ui/select';
	import { Label } from '$lib/components/ui/label';
	import Button from '$lib/components/ui/button/button.svelte';
	import { Switch } from '$lib/components/ui/switch/index.js';
	import { Progress } from '$lib/components/ui/progress';
	import { Badge } from '$lib/components/ui/badge';
	import { Separator } from '$lib/components/ui/separator';
	import SuperDebug from 'sveltekit-superforms';
	import default_shortforms from '../../db/shortforms.se.json';
	import { importDefaultShortforms, importShortforms } from '../../db/import';
	import { createShortformList, type List } from '../../db/main';

	$: form = {
		textarea: '',
		name: '',
		type: false
	};
	let importing = false;
	let progress = 0;
	const handleImport = () => {
		importing = true;
		const l: List = { name: form.name, type: form.type ? 1 : 0, updated: new Date() };
		createShortformList(l);
		form.textarea.split('\n').forEach((sf, i, sfs) => {
			progress = 100 * (i / sfs.length);
			if (Math.random() > 0.8) {
				setTimeout(() => {}, 125);
			}
		});
	};
	const cancelImport = () => {
		importState.data = '';
		importState.errors = [];
		goto('/');
	};
	const importDefaultList = () => {
		importState.data = '';
		importState.errors = [];
		default_shortforms.shortforms.forEach((sf) => {
			importState.data += sf.sf + '=' + sf.p + '\n';
		});
	};
	onMount(() => {
		form.textarea = importState.data;
	});
</script>

<Card.Root class="w-[490px]">
	<Card.Header>
		<Card.Title>Importera förkortningar</Card.Title>
		<Card.Description>Nån annan hjälptext.</Card.Description>
	</Card.Header>
	<Card.Content>
		<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data">
			<div class="grid grid-cols-4 items-center gap-4">
				<Label>Förkortningar</Label>
				<textarea
					class="block w-[290px] rounded-lg border border-gray-200 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
					bind:value={form.textarea}
					placeholder="Skriv/klistra in dina förkortingar i formatet
förk=förkortning
förkr=förkortningar
förkn=förkortningen
..."
					rows="5"
				></textarea>
			</div>
			<div class="grid grid-cols-4 items-center gap-4">
				<Label>Namn</Label>
				<Input bind:value={form.name} placeholder="Döp förkortningslistan" class="w-[290px]" />
			</div>
			<div class="grid grid-cols-4 items-center gap-4">
				<Label>Prioritera lista</Label>
				<Switch bind:checked={form.type} />
			</div>
			<p class="leading-7 [&:not(:first-child)]:mt-2">{importState.errors}</p>
		</form>
	</Card.Content>
	<Card.Footer class="flex justify-between">
		<Button on:click={cancelImport} variant="outline">Avbryt</Button>
		<Button on:click={handleImport}>Importera</Button>
	</Card.Footer>
</Card.Root>
