<script>
	import { onMount } from 'svelte';

	let events = ['ping', 'pong'];

	$: msg = '';
	$: jmsg = {};
	$: recv = '';
	$: dping = '';
	$: dpong = '';

	function now() {
		const now = new Date(Date.now());

		return now.toISOString();
	}

	function SSEMsg() {
		let url = '/api/sse?';
		for (let e in events) {
			url += `event=${events[e]}&`;
		}
		console.log(`sse url: ${url}`);
		const sse = new EventSource(url);

		console.log('subscribe ping pong');

		sse.onopen = () => {
			console.log(`sse open ${now()}`);
			msg = `sse open ${now()}`;
		};

		sse.addEventListener('ping', (e) => {
			let Msg = JSON.parse(e.data);
			msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
			console.log(msg);
			dping = Msg.id;
		});

		sse.addEventListener('pong', (e) => {
			let Msg = JSON.parse(e.data);
			msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
			console.log(msg);
			dpong = Msg.id;
		});

		return () => {
			sse.close();
			console.log(`sse closing ${Date.now()}`);
		};
	}

	function Subscribe() {
		const sse = new EventSource(`/api/sse?event=*`);
		console.log('subscribe');

		// sse.onopen = () => {
		// 	console.log(`sse open ${now()}`);
		// 	msg = `sse open ${now()}`;
		// };

		// sse.onerror = () => {
		// 	console.log(`sse error ${now()}`);
		// 	if (sse.readyState === EventSource.CONNECTING) {
		// 		console.log(`sse reconnecting ${now()}`);
		// 		msg = `sse reconnecting ${now()}`;
		// 	} else {
		// 		msg = `sse error ${now()}`;
		// 	}
		// };

		sse.onmessage = (e) => {
			let Msg = JSON.parse(e.data);
			console.log(`received: ${JSON.stringify(Msg)}`);
			recv = `received: ${JSON.stringify(Msg)} ${now()}`;
		};

		sse.addEventListener('ping', (e) => {
			let Msg = JSON.parse(e.data);
			msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
			console.log(msg);
			jmsg = Msg;
			dping = Msg.id;
		});

		sse.addEventListener('pong', (e) => {
			let Msg = JSON.parse(e.data);
			msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
			console.log(msg);
			jmsg = Msg;
			dpong = Msg.id;
		});

		sse.addEventListener('msg', (e) => {
			let Msg = JSON.parse(e.data);
			msg = `Msg: ${Msg.id} ${Msg.data} ${now()}`;
			console.log(msg);
			jmsg = Msg;
		});

		return () => {
			sse.close();
			console.log(`sse closing ${Date.now()}`);
		};
	}

	// onMount(() => {
	// 	const unsub = Subscribe();
	// 	return unsub;
	// });

	async function newmsg() {
		await fetch('/api/msg');
	}

	async function Ping() {
		await fetch('/api/ping');
	}

	async function Pong() {
		await fetch('/api/pong');
	}
</script>

<h1>{msg}</h1>

{#if recv != ''}
	<pre>{recv}</pre>
{/if}

{#if jmsg != {}}
	<pre>{JSON.stringify(jmsg, null, 2)}</pre>
{/if}

<br />
<h2>Ping: {dping}</h2>
<br />
<h2>Pong: {dpong}</h2>

<button on:click={newmsg}>send Msg</button>
<button on:click={Ping}>send Ping</button>
<button on:click={Pong}>send Pong</button>

<hr />

<button on:click={SSEMsg}>SSE PingPong</button>
<br />
<button on:click={Subscribe}>SSE ALL</button>
