<script lang="ts">

	import PageContainer from "$lib/components/PageContainer.svelte";

	import { onMount } from "svelte";

	import { LineNumbers, HighlightSvelte } from "svelte-highlight";

	import 'svelte-highlight/styles/github-dark.css';

	export let data;

	const MAX_LINES = 20;

	const INITIAL_TIMEOUT = 500;

	function generateAndInjectCSSOpacity(n: number) {

		let css = "";

		for (let i = 1; i <= n; i++) {

			let opacity = Math.max(0, 1 - (i - 1) * (1 / (n - 1)));

			css += `#line:nth-child(${i}) {opacity: ${opacity.toFixed(2)};}\n`;

		}

		let style = document.createElement("style");

		style.textContent = css;

		document.head.appendChild(style);

	}

	function makeDebounce<K, R>(func: (arg1: K) => R, timeout: number) {

		let timeoutId: number | undefined;

		let lastCallTimestamp: number | undefined;

		let rejectLastCall: (reason?: any) => void;

		return {

			adjustTimeout: (value: number) => {

				timeout = value;

				window.clearTimeout(timeoutId);

				lastCallTimestamp = undefined;

			},

			getLastCallTimestamp: () => lastCallTimestamp,

			fn: (input: K) => {

				if (timeoutId) {

					window.clearTimeout(timeoutId);

					rejectLastCall(`💀 Cleared timeout: ${timeoutId}`);

				}

				return new Promise<R>((res, rej) => {

					rejectLastCall = rej;

					lastCallTimestamp = performance.now();

					timeoutId = window.setTimeout(() => {

						lastCallTimestamp = undefined;

						res(func(input));

					}, timeout);

				});

			},

		};

	}

	function makeAbortableFetch() {

		let controller: AbortController | undefined;

		let id = 0;

		return async (input: RequestInfo | URL, init?: RequestInit) => {

			if (controller) {

				controller.abort();

			}

			const currentId = id++;

			controller = new AbortController();

			appendOutput(`🚀 Fired API ${currentId}`);

			return fetch(input, {

				...(init || {}),

				signal: controller.signal,

			}).catch((err) => {

				if (err instanceof DOMException) {

					if (err.name === "AbortError") {

						appendOutput(

							`💀 The API call ${currentId} was aborted`,

						);

					}

				}

				return err;

			});

		};

	}

	function appendOutput(str: string) {

		const output = document.getElementById("output");

		const child = document.createElement("div");

		child.setAttribute("id", "line");

		child.innerHTML = str;

		output?.insertBefore(child, output.firstChild);

		while (output && output.children.length >= MAX_LINES) {

			output.removeChild(output.lastElementChild as Node);

		}

	}

	onMount(() => {

		let timeout = INITIAL_TIMEOUT;

		const abortableFetch = makeAbortableFetch();

		let {

			fn: abortableFetchDebounced,

			adjustTimeout,

			getLastCallTimestamp,

		} = makeDebounce(

			(data: string) => () =>

				abortableFetch(`https://echo.free.beeceptor.com?query=${data}`),

			timeout,

		);

		const timer = document.getElementById("timer");

		setInterval(() => {

			const val = getLastCallTimestamp();

			if (val) {

				const elapsedMs = performance.now() - val;

				timer?.style.setProperty(

					"width",

					`${100 * (elapsedMs / timeout)}%`,

				);

				timer?.style.setProperty("background-color", "gray");

			} else {

				timer?.style.setProperty("width", "100%");

				timer?.style.setProperty("background-color", "green");

			}

		}, 1000 / 120);

		(document.getElementById("timeout") as HTMLInputElement).value =

			String(timeout);

		document.getElementById("timeout")?.addEventListener("input", (e) => {

			const target = e.target as HTMLInputElement;

			timeout = parseInt(target.value, 10);

			adjustTimeout(timeout);

		});

		document.getElementById("query")?.addEventListener("input", (e) => {

			const target = e.target as HTMLInputElement;

			abortableFetchDebounced(target.value)

				.then((dispatchedFetch) => {

					dispatchedFetch().then(async (res) => {

						const data = await res.json();

						appendOutput(

							`✅ ${JSON.stringify(data.parsedQueryParams)}`,

						);

					});

				})

				.catch((err) => appendOutput(err));

		});

		generateAndInjectCSSOpacity(MAX_LINES);

	});

</script>

<svelte:head>

	<style>

		#form {

			display: flex;

			flex-direction: column;

			padding: 20px;

			gap: 5px;

			background-color: black;

		}

		#timer {

			min-height: 20px;

			border-radius: 5px;

			width: 0%;

		}

		#output {

			background-color: #2d3235;

			padding: 10px;

			display: flex;

			flex-direction: column;

			gap: 5px;

			width: 100%;

		}

	</style>

</svelte:head>

<PageContainer>

	<div>

		<div class="text-2xl font-bold text-secondary">

			{data.title}

		</div>

		<div class="text-sm font-bold text-primary">

			Written: {data.written}

		</div>

		<p class="first-letter:text-2xl">

			Javascript closures are simply stateful functions. Here's an example

			chaining a debounce closure with a abortable fetch closure.

		</p>

		<p>

			Note that even though this website is written in sveltekit, the example javascript uses straigh DOM manipulation

			to demonstrate the details.

		</p>

		<div id="form">

			<h2>1. Adjust API Timeout (ms)</h2>

			<input class="input input-primary" id="timeout" type="text" />

			<h2>2. Write something</h2>

			<input class="input input-primary" id="query" type="text" />

				<div id="timer"></div>

			<h2>Output:</h2>

			<div id="output"></div>

		</div>

		<div>

			<h2 class="text-2xl text-secondary">Svelte Source (This page)</h2>

			<HighlightSvelte 

				code={data["sveltePageSource"]}

				let:highlighted

			>

				<LineNumbers {highlighted} />

			</HighlightSvelte>

			<pre><code class="hljs language-html"></code></pre>

		</div>

	</div>

</PageContainer>