<script lang="ts">
	import Tooltip from 'src/lib/Tooltip.svelte';
	import 'src/styles/forms.css';
	import { post } from 'src/lib/requests.svelte';
	import Spinner from 'src/lib/Spinner.svelte';
	import { preventDefault } from 'src/lib/utils';

	let { onreload = () => {} }: { onreload?: () => void } = $props();

	let addNewToken = $state(false);

	let expiry_date: HTMLInputElement = $state(undefined as any);

	type NewToken = {
		name: string;
		expiry: number;
		token: string;
	};

	let token: Promise<NewToken> | undefined = $state();

	let newToken: {
		name: string;
		expiry: string;
		password: string;
	} = $state({
		name: '',
		expiry: '',
		password: ''
	});

	async function createToken(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
		let expiry: number = 0;
		expiry_date.setCustomValidity('');
		if (newToken.expiry == '') {
			expiry = -1;
		} else {
			expiry = Number(newToken.expiry);
			if (isNaN(expiry)) {
				expiry_date.setCustomValidity('Invalid Number');
				e.currentTarget.reportValidity();
				return;
			}
		}

		try {
			const r = await post('user/token/add', {
				name: newToken.name,
				expiry: expiry,
				password: newToken.password
			});
			token = Promise.resolve(r);
			setTimeout(onreload, 500);
		} catch (e) {
			token = undefined;
			console.error('Notify user', e);
		}
	}

	$effect(() => {
		if (expiry_date) {
			if (isNaN(Number(newToken.expiry))) {
				expiry_date.setCustomValidity('Invalid Number');
			} else {
				expiry_date.setCustomValidity('');
			}
		}
	});
</script>

{#if addNewToken}
	<div>
		<h2>Add New Token</h2>
		{#if !token}
			<form onsubmit={preventDefault(createToken)}>
				<fieldset>
					<label for="name">Name</label>
					<input required bind:value={newToken.name} name="name" />
				</fieldset>
				<fieldset>
					<label for="expiry_date">Expiry Date</label>
					<div class="flex">
						<input bind:this={expiry_date} bind:value={newToken.expiry} name="expiry_date" />
						<Tooltip title="Time in seconds. Leave empty to last forever">
							<span class="center-question bi bi-question-circle-fill"></span>
						</Tooltip>
					</div>
				</fieldset>
				<fieldset>
					<label for="password">Password</label>
					<input required bind:value={newToken.password} name="password" />
				</fieldset>
				<div>
					<button> Update </button>
				</div>
			</form>
		{:else}
			{#await token}
				<Spinner /> Generating
			{:then t}
				<h3>Token generated</h3>
				<form onsubmit={preventDefault(() => {})}>
					<fieldset>
						<label for="token">Token</label>
						<div class="flex">
							<input value={t.token} oninput={(e) => e.preventDefault()} name="token" />
							<div style="width: 5em;">
								<button onclick={() => navigator.clipboard.writeText(t.token)}>
									<span class="bi bi-clipboard"></span>
								</button>
							</div>
						</div>
					</fieldset>
					<div>
						<button onclick={() => (token = undefined)}> Generate new token </button>
					</div>
				</form>
			{:catch e}
				{e}
			{/await}
		{/if}
	</div>
{:else}
	<div>
		<button class="expander" onclick={() => (addNewToken = true)}> Add New Token </button>
	</div>
{/if}
