<script lang="ts">
	import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
	import bwipjs from 'bwip-js';
	import { onMount } from 'svelte';

	$: firstname = '';
	$: lastname = '';
	$: email = '';
	$: doneButtonEnabled = false;
	$: showResult = false;

	let response: ResponseRunner;
	const group = 1; //Default to Bürgerlauf

	function focusFirstName() {
		setTimeout(() => {
			document.getElementById('firstname')?.focus();
		}, 50);
		setTimeout(() => {
			document.getElementById('firstname')?.focus();
		}, 100);
	}
	function focusDoneButton() {
		setTimeout(() => {
			document.getElementById('done')?.focus();
		}, 50);
		setTimeout(() => {
			document.getElementById('done')?.focus();
		}, 100);
	}

	async function register() {
		try {
			let emailToSend = null;
			if (email !== '') {
				if (email.includes('@')) {
					emailToSend = email;
				}
			}
			response = (await RunnerService.runnerControllerPost({
				firstname,
				lastname,
				email: emailToSend,
				group
			})) as ResponseRunner;
			showResult = true;
			setTimeout(() => {
				doneButtonEnabled = true;
				setTimeout(() => {
					focusDoneButton();
				}, 25);
			}, 7500);
		} catch (error) {
			console.log(error);
			showResult = false;
			localStorage.clear();
			location.reload();
		}
		firstname = '';
		lastname = '';
	}

	function textToBase64Barcode(text: string, is_qrcode: boolean) {
		const canvas = document.createElement('canvas');
		if (is_qrcode) {
			bwipjs.toCanvas(canvas, {
				bcid: 'qrcode',
				text: `${text}`,
				scale: 10,
				includetext: false,
				textxalign: 'center',
				backgroundcolor: 'ffffff'
			});
		} else {
			bwipjs.toCanvas(canvas, {
				bcid: 'code128',
				text: `${text}`,
				scale: 10,
				includetext: true,
				textxalign: 'center',
				backgroundcolor: 'ffffff',
				height: 10
			});
		}
		return canvas.toDataURL('image/png');
	}

	onMount(() => {
		focusFirstName();
	});
</script>

<div class="flex h-full items-center py-16 select-none print:py-0 print:items-baseline">
	<div class="w-full max-w-md mx-auto p-6 print:p-0">
		<!-- <div
			class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-200"
		> -->
		<div class="p-4 sm:p-7 print:p-0 print:sm:p-0">
			<div class="mt-5 print:mt-0">
				<!-- Form -->
				{#if !showResult}
					<div class="text-center">
						<h1 class="block text-7xl font-bold text-gray-800 dark:text-white">LfK!2025</h1>
						<h1 class="block text-4xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
						<!-- <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> -->
					</div>
					<form class="mt-4 text-lg" on:submit|preventDefault={register}>
						<div class="grid gap-y-4">
							<!-- Form Group -->
							<div>
								<label for="firstname" class="block text-lg font-bold mb-2 sr-only">Vorname</label>
								<div class="relative">
									<input
										on:keydown={(e) => {
											if (e.keyCode === 13) {
												e.preventDefault();
												document.getElementById('lastname')?.focus();
											}
											if (e.keyCode === 40) {
												document.getElementById('lastname')?.focus();
											}
										}}
										type="text"
										autocomplete="one-time-code"
										id="firstname"
										name="firstname"
										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
										required
										placeholder="Vorname"
										bind:value={firstname}
										aria-describedby="firstname-error"
									/>
									<!-- <div
											class:hidden={firstname || firstname.length != 0}
											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
										>
											<svg
												class="h-5 w-5 text-red-500"
												width="16"
												height="16"
												fill="currentColor"
												viewBox="0 0 16 16"
												aria-hidden="true"
											>
												<path
													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
												/>
											</svg>
										</div> -->
								</div>
								<!-- <p
										class:hidden={firstname || firstname.length != 0}
										class="text-xs text-red-600 mt-2"
										id="firstname-error"
									>
										Bitte gebe deinen Vornamen ein
									</p> -->
							</div>
							<!-- End Form Group -->

							<!-- Form Group -->
							<div>
								<label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label>
								<div class="relative">
									<input
										on:keydown={(e) => {
											if (e.keyCode === 13) {
												e.preventDefault();
												document.getElementById('email')?.focus();
											}
											if (e.keyCode === 38) {
												document.getElementById('firstname')?.focus();
											}
											if (e.keyCode === 40) {
												document.getElementById('email')?.focus();
											}
										}}
										autocomplete="one-time-code"
										type="lastname"
										id="lastname"
										name="lastname"
										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
										required
										placeholder="Nachname"
										aria-describedby="lastname-error"
										bind:value={lastname}
									/>
									<!-- <div
											class:hidden={lastname || lastname.length != 0}
											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
										>
											<svg
												class="h-5 w-5 text-red-500"
												width="16"
												height="16"
												fill="currentColor"
												viewBox="0 0 16 16"
												aria-hidden="true"
											>
												<path
													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
												/>
											</svg>
										</div> -->
								</div>
								<!-- <p
										class:hidden={lastname || lastname.length != 0}
										class="text-xs text-red-600 mt-2"
										id="lastname-error"
									>
										Bitte gebe deinen Nachnamen ein
									</p> -->
							</div>
							<!-- End Form Group -->

							<!-- Form Group -->
							<div>
								<label for="email" class="block text-lg font-bold mb-2 sr-only"
									>E-Mail (optional)</label
								>
								<div class="relative">
									<input
										on:keydown={(e) => {
											if (e.keyCode === 13) {
												e.preventDefault();
												document.getElementById('submit')?.focus();
											}
											if (e.keyCode === 38) {
												document.getElementById('lastname')?.focus();
											}
											if (e.keyCode === 40) {
												document.getElementById('submit')?.focus();
											}
										}}
										autocomplete="one-time-code"
										type="email"
										id="email"
										name="email"
										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
										placeholder="E-Mail (optional)"
										aria-describedby="lastname-error"
										bind:value={email}
									/>
									<!-- <div
											class:hidden={lastname || lastname.length != 0}
											class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
										>
											<svg
												class="h-5 w-5 text-red-500"
												width="16"
												height="16"
												fill="currentColor"
												viewBox="0 0 16 16"
												aria-hidden="true"
											>
												<path
													d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
												/>
											</svg>
										</div> -->
								</div>
								<!-- <p
										class:hidden={lastname || lastname.length != 0}
										class="text-xs text-red-600 mt-2"
										id="lastname-error"
									>
										Bitte gebe deinen Nachnamen ein
									</p> -->
							</div>
							<!-- End Form Group -->
							<p
								class="bg-white text-gray-800 dark:bg-gray-800 dark:text-gray-400 rounded border p-3"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="24"
									height="24"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
									stroke-linecap="round"
									stroke-linejoin="round"
									class="inline"
									><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path
										d="M12 8h.01"
									/></svg
								>
								Mit der Registrierung akzeptieren Sie die AGBs sowie die Datenschutzerklärung des Lauf
								für Kaya! 2025 sowie der ODIT.Services GmbH.
							</p>
							<button
								on:keydown={(e) => {
									if (e.keyCode === 38) {
										document.getElementById('email')?.focus();
									}
								}}
								id="submit"
								type="submit"
								disabled={!firstname || !lastname}
								class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800 cursor-pointer"
								>Anmelden</button
							>
						</div>
					</form>
					<!-- End Form -->
				{:else}
					<div class="mb-2 text-center">
						<h3 class="text-4xl font-semibold dark:text-white print:text-5xl">
							{response.firstname}
							{response.lastname}
						</h3>
					</div>

					<div class="mb-2 text-center hidden print:block">
						<h3 class="text-4xl font-semibold dark:text-white">
							Runner-ID
						</h3>
						<h3 class="text-2xl font-semibold dark:text-white">
							Zeige diesen Code am Infozelt vor, um deine Läuferkarte zu erhalten
						</h3>
						<img
							class="w-full md:w-auto mb-2 mx-auto bg-white p-4 print:hidden"
							alt="runner id"
							src={textToBase64Barcode(response.id.toString(), false)}
						/>
						<img
							class="w-3/4 md:w-auto mb-2 mx-auto bg-white p-4 hidden print:block"
							alt="runner id print only"
							src={textToBase64Barcode(response.id.toString(), false)}
						/>
					</div>

					<div class="mb-2 text-center">
						<h3 class="text-4xl font-semibold dark:text-white hidden print:block">
							Selfservice
						</h3>
						<h3 class="text-xl font-semibold dark:text-white">
							Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine Rundenzeiten, Spenden und Urkunden.
						</h3>
						<img
							class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
							alt="runner selfservice"
							src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
						/>
					</div>

					<div class="mx-auto text-center items-center print:hidden">
						<button
							class:opacity-50={!doneButtonEnabled}
							disabled={!doneButtonEnabled}
							id="done"
							on:click={() => {
								doneButtonEnabled = false;
								showResult = false;
								focusFirstName();
							}}
							class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800 cursor-pointer"
							>Fertig</button
						>
					</div>
				{/if}
			</div>
			<!-- </div> -->
		</div>
	</div>
</div>
