<svelte:options runes={true} />

<script lang="ts">
	import type { Server } from '$lib/types/data-types';
	import { io } from 'socket.io-client';
	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
	import ServerCard from '$lib/components/ServerCard.svelte';

	let { data }: { data: { promise: Promise<string> } } = $props();

	let token = $state();

	data.promise.then((jwt) => {
		token = jwt;
	});

	let servers: readonly Server[] = $state.frozen([]);

	let icons: readonly string[] = $state.frozen([]);

	let monitorList: Map<number, Heartbeat> = $state(new Map());

	//let token = $props();

	$effect(() => {
		if (token) {
			const socket = io('https://status.neshweb.net/');

			socket.on('connect', () => {
				socket.emit('loginByToken', token, () => {});
			});

			socket.on('importantHeartbeatList', (_, data) => {
				let recent = data[data.length - 1];
				let monitor: Heartbeat = {
					monitorID: recent.monitor_id,
					status: recent.status,
					time: recent.time,
					msg: recent.msg,
					ping: recent.ping,
					important: recent.important,
					duration: recent.duration
				};
				monitorList.set(monitor.monitorID, monitor);
				monitorList = new Map(monitorList.entries());
			});

			socket.on('heartbeatList', (_, data) => {
				let recent = data[data.length - 1];
				let monitor: Heartbeat = {
					monitorID: recent.monitor_id,
					status: recent.status,
					time: recent.time,
					msg: recent.msg,
					ping: recent.ping,
					important: recent.important,
					duration: recent.duration
				};
				monitorList.set(monitor.monitorID, monitor);
				monitorList = new Map(monitorList.entries());
			});

			socket.on('heartbeat', (data) => {
				monitorList.set(data.monitorID, data);
				monitorList = new Map(monitorList.entries());
			});
		}
	});

	async function get(url: string): Promise<any> {
		let res = await fetch(url);
		if (res.ok) {
			let data = await res.json();
			return data;
		} else {
			return Promise.reject();
		}
	}

	$effect(() => {
		get('/data/servers').then((data: Server[]) => {
			servers = data;
		});
	});

	$effect(() => {
		get('/assets/icons').then((data: string[]) => {
			icons = data;
		});
	});
</script>

<svelte:head>
	<title>Servers</title>
	<meta name="description" content="Overview of Game Servers running on neshweb.net" />
</svelte:head>

<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
	{#each servers as server}
		{#if typeof server.id === 'undefined'}
			<ServerCard {server} {icons} />
		{:else}
			<ServerCard {server} {icons} monitor={monitorList.get(server.id)} />
		{/if}
	{/each}
</div>