<script lang="ts">
import { onMount } from "svelte";
import Chart from "util/Chart.svelte";
import { get_endpoint } from "lib/PixeldrainAPI";
    import { host_colour, host_label } from "./HostMetricsLib";

let {
	metric = "",
	window = 0, // Size of the data window in minutes
	interval = 0, // Interval of the datapoints in minutes
	data_type = "number"
}: {
	metric: string;
	window: number;
	interval: number;
	data_type?: string;
} = $props();

let chart: Chart = $state()
let chartTimeout: NodeJS.Timeout = null

const loadGraph = () => {
	if (chartTimeout !== null) { clearTimeout(chartTimeout) }
	chartTimeout = setTimeout(() => { loadGraph() }, 10000)

	let today = new Date()
	let start = new Date()
	start.setMinutes(start.getMinutes() - window)

	fetch(
		get_endpoint() + "/admin/host_metrics" +
		"?start=" + start.toISOString() +
		"&end=" + today.toISOString() +
		"&metric="+ metric +
		"&interval=" + interval
	).then(resp => {
		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
		return resp.json();
	}).then(async resp => {

		resp.timestamps.forEach((val: string, idx: number) => {
			let date = new Date(val);
			let dateStr: string = date.getFullYear().toString();
			dateStr += "-" + ("00" + (date.getMonth() + 1)).slice(-2);
			dateStr += "-" + ("00" + date.getDate()).slice(-2);
			dateStr += " " + ("00" + date.getHours()).slice(-2);
			dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
			resp.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
		});
		chart.data().labels = resp.timestamps;

		let i = 0
		for (const host of Object.keys(resp.host_amounts).sort()) {
			if (chart.data().datasets[i] === undefined) {
				chart.data().datasets[i] = {
					label: await host_label(host),
					data: [],
					borderWidth: 1,
					pointRadius: 0,
				}
			}
			chart.data().datasets[i].borderColor = host_colour(host)
			chart.data().datasets[i].backgroundColor = host_colour(host)

			if (data_type === "duration") {
				for (let i = 0; i < resp.host_amounts[host].length; i++) {
					// Go durations are expressed on nanoseconds, divide by 1
					// million to convert to milliseconds
					resp.host_amounts[host][i] /= 1000000
				}
			}

			chart.data().datasets[i].data = resp.host_amounts[host]
			i++
		}

		chart.update()
	})
}

onMount(() => {
	loadGraph();

	return () => {
		if (chartTimeout !== null) {
			clearTimeout(chartTimeout)
		}
	}
})
</script>

<div>
	<div class="title">{metric}</div>
	<Chart bind:this={chart} data_type={data_type} legend={false} ticks={false} animations={false} />
</div>

<style>
.title {
	font-size: 1.2em;
}
</style>
