<script>
	import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
	import QrCodeScanner from "./QrCodeScanner.svelte";
	let state = "scan_runner";
	let runnerinfo = { id: 0, firstname: "", lastname: "" };
	let cardCode = "";
	$: scannerActive = state.includes("scan");
</script>

<div class="p-4">
	<h3 class="text-3xl font-bold">Card Assignment for Mobile</h3>
	<!-- <p>state</p>
	<p>{state}</p>
	<p>scannerActive</p>
	<p>{scannerActive}</p> -->
	{#if state.includes("scan_")}
		<!--  -->
		{#if state === "scan_runner"}
			<h3 class="text-xl font-bold">Scan Runner (Selfservice QR)</h3>
		{/if}
		{#if state === "scan_card"}
			<h3 class="text-xl font-bold">Runner Scanned</h3>
			<p>{runnerinfo.firstname} {runnerinfo.lastname} [#{runnerinfo.id}]</p>
			<h3 class="text-xl font-bold">Scan Card (Code 128 Barcode)</h3>
		{/if}
		<QrCodeScanner
			paused={!scannerActive}
			on:detect={(e) => {
				console.log({ type: "DETECT", code: e.detail.decodedText });
				if (state === "scan_runner") {
					if (
						e.detail.decodedText.includes(
							"https://portal.lauf-fuer-kaya.de/profile/"
						)
					) {
						const runnerID = JSON.parse(
							atob(
								e.detail.decodedText
									.replace("https://portal.lauf-fuer-kaya.de/profile/", "")
									.split(".")[1]
							)
						).id;
						new Audio("/beep.mp3").play();
						RunnerService.runnerControllerGetOne(runnerID).then((runner) => {
							console.log(runner);
							runnerinfo = runner;
						});
						state = "scan_card";
					}
				}
				if (state === "scan_card") {
					if (
						!e.detail.decodedText.includes(
							"https://portal.lauf-fuer-kaya.de/profile/"
						)
					) {
						cardCode = e.detail.decodedText;
						new Audio("/beep.mp3").play();
						state = "assigning";
						RunnerCardService.runnerCardControllerGetAll().then((cards) => {
							console.log(cards);
							const card = cards.find((c) => c.code === cardCode);
							if (card) {
								console.log("card found", card);
								RunnerCardService.runnerCardControllerPut(card.id, {
									enabled: true,
									id: card.id,
									runner: runnerinfo.id,
								}).then(() => {
									state = "done";
								});
							} else {
								state = "error_card_404";
							}
						});
					}
				}
			}}
			width={320}
			height={320}
			class="w-full max-w-sm bg-neutral-300 rounded-lg overflow-hidden"
		/>
		{#if state === "scan_card"}
			<button
				on:click={() => {
					state = "scan_runner";
					runnerinfo = { id: 0, firstname: "", lastname: "" };
					cardCode = "";
				}}
				type="button"
				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-100 text-red-800 hover:bg-red-200 focus:outline-hidden focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:bg-red-800/30 dark:hover:bg-red-800/20 dark:focus:bg-red-800/20 w-full mt-2"
			>
				Cancel
			</button>
		{/if}
		<!--  -->
	{:else}
		<!--  -->
		{#if state === "assigning"}
			<p>Assigning Card {cardCode} ⌛</p>
			<p>Please wait a moment while we assign the card...</p>
		{/if}
		{#if state === "done"}
			<p>
				Assigned Card {cardCode} to {runnerinfo.firstname}
				{runnerinfo.lastname} [#{runnerinfo.id}] ✅
			</p>
			<button
				on:click={() => {
					// state = "scan_runner";
					// runnerinfo = { id: 0, firstname: "", lastname: "" };
					// cardCode = "";
					location.reload();
				}}
				type="button"
				class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:outline-hidden focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:bg-blue-800/30 dark:hover:bg-blue-800/20 dark:focus:bg-blue-800/20 w-full mt-2"
			>
				Done
			</button>
		{/if}
		<!--  -->
	{/if}
</div>
