<script lang="ts">
	import { eventTarget } from "$lib/ws.svelte";
	import { onMount } from "svelte";
	import { fade } from "svelte/transition";

	interface CallEntry {
		num: string;
		ticket: {
			status: "called" | "completed" | "no-show";
			room?: string;
		}
	};

	let calls = $state<CallEntry[]>([]);
	let newCalls = $state<CallEntry[]>([]);

	let connected = $state(false);

	onMount(() => {
		eventTarget.addEventListener("display", (e) => {
			const detail = (e as CustomEvent).detail;
			const _newCalls = detail.tickets.filter((call: CallEntry) => !calls.find(c => c.num === call.num));
			newCalls.push(..._newCalls);
			calls = detail.tickets ?? [];
			connected = true;
			setTimeout(() => {
				newCalls = newCalls.filter(c => _newCalls.includes(c));
			}, 10000);
		});

		eventTarget.dispatchEvent(new CustomEvent("send", { detail: { type: "display" } }));
	})
	
	const ENTRIES = {A: 1, B: 2, C: 1, D: 2, E: 1};

	const ENTRIES_PER_TABLE = 10;
</script>

{#if newCalls.length > 0}
	<div class="fixed top-0 left-0 w-full h-full backdrop-blur-md z-50" transition:fade>
		<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-9xl font-bold bg-background text-foreground p-4 rounded-md flex flex-col gap-10">
			{#each newCalls as call (call.num)}
				<span class="mx-4">{call.num} &rarr; {call.ticket.room}</span>
			{/each}
		</div>
	</div>
{/if}

<div class="p-4 flex justify-around gap-4 text-5xl">
<!--	<h1 class="text-6xl font-bold">Aufruf</h1> -->
	{#if connected}
		<table class="self-start">
			<tbody>
				<tr>
					<th class="pr-4 font-bold">Wartenr.</th>
					<th class="pr-4 font-bold">&rarr;</th>
					<th class="pr-4 font-bold">Raum</th>
				</tr>
				{#each calls.slice(0, ENTRIES_PER_TABLE) as call (call.num)}
					<tr>
						<td class="call">{call.num}</td>
						<td class="call">&rarr;</td>
						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
					</tr>
				{/each}
			</tbody>
		</table>

		<div class="fixed h-full w-1 bg-black top-0 left-1/2 -translate-x-1/2"></div>

		<table class="self-start">
			<tbody>
				<tr>
					<th class="pr-4 font-bold">Wartenr.</th>
					<th class="pr-4 font-bold">&rarr;</th>
					<th class="pr-4 font-bold">Raum</th>
				</tr>
				{#each calls.slice(ENTRIES_PER_TABLE) as call (call.num)}
					<tr>
						<td class="call">{call.num}</td>
						<td class="call">&rarr;</td>
						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
					</tr>
				{/each}
			</tbody>
		</table>
	{/if}
</div>

<style>
	.call {
		animation: flash 5s ease-in-out;
		animation-delay: 10s;
	}

	@keyframes flash {
		0% { opacity: 0; }
		10% { opacity: 1; }
		20% { opacity: 0; }
		30% { opacity: 1; }
		40% { opacity: 0; }
		50% { opacity: 1; }
		60% { opacity: 0; }
		70% { opacity: 1; }
		80% { opacity: 0; }
		100% { opacity: 1; }
	}

	th, td {
		padding: 0.5rem 1rem;
		text-align: center;
		background-color: var(--accent);
		border: 2px solid var(--background);
	}
</style>
