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

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

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

	let connected = $state(false);

	onMount(() => {
		eventTarget.addEventListener("display", (e) => {
			const detail = (e as CustomEvent).detail;
			calls = detail.tickets ?? [];
			connected = true;
		});

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

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

		<table>
			<tbody>
				<tr>
					<th class="pr-4 font-bold">Wartenr.</th>
					<th class="pr-4 font-bold">-&gt;</th>
					<th class="pr-4 font-bold">Raum</th>
				</tr>
				{#each calls.filter(c => c.num.startsWith("B")) as call (call.num)}
					<tr>
						<td class="call">{call.num}</td>
						<td class="call">-&gt;</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;
	}

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

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