<script lang="ts">
	import { onDestroy, onMount } from 'svelte';

	export let end: string;
	$: endTime = new Date(end);

	let h = 0;
	let m = 0;
	let s = 0;

	let active = true;

	let i;

	const calc = () => {
		let now = new Date();
		let secs = Math.ceil((endTime.getTime() - now.getTime()) / 1000);
		h = Math.floor(secs / 3600);
		m = Math.floor((secs % 3600) / 60);
		s = Math.floor((secs % 3600) % 60);

		if (secs < 0) {
			active = false;
			return;
		}
	};
	onMount(() => {
		calc();
		i = setInterval(calc, 100);
	});

	onDestroy(() => {
		clearInterval(i);
	});
</script>

{#if active}
	Active - {h}:{('0' + m).slice(-2)}:{('0' + s).slice(-2)}
{:else}
	Contest Ended
{/if}
