<script>
	import { base } from '$app/paths';
	import { createInvite } from '$lib/apiServer';
	import { clipboard } from '@skeletonlabs/skeleton';

	let invite = null;
	$: inviteUrl = invite ? new URL(`/invite/${invite.id}`, document.location) : null;
	$: inviteUrl, console.log("invite url", inviteUrl);

	async function onSubmit() {
		let response = await createInvite();
		if (response.status == 200) {
			invite = response.data;
		}
		console.log("base url", base);
	}

	async function onReset() {
		invite = null;
	}
</script>

<form
	on:submit|preventDefault={onSubmit}
	on:reset|preventDefault={onReset}>
	{#if inviteUrl}
	<button
		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
		use:clipboard={inviteUrl}
		type="reset">
		Copy Invite
	</button>
	{:else}
	<button
		class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
		type="submit">
		Invite
	</button>
	{/if}
</form>
