<script lang="ts">
	import { onDestroy, onMount } from 'svelte';
	import { buzzerState } from '../stores';
	import { Button } from 'flowbite-svelte';

	export const start = () => {
		timerStartedAt = BigInt(Math.floor(performance.now()));
		timerStoppedAt = undefined;
	};

	export const reset = () => {
		timerStartedAt = undefined;
		timerStoppedAt = undefined;
		currentTimerValue = undefined;
	};

	export let placeholder: string = '';

	let timerStartedAt: bigint | undefined;
	let timerStoppedAt: bigint | undefined;

	let currentTimerValue: bigint | undefined;

	let timerInterval: number | undefined;

	onMount(() => {
		timerInterval = setInterval(() => {
			if (timerStartedAt) {
				let now = BigInt(Math.floor(performance.now()));
				const timerValue = (timerStoppedAt ?? now) - timerStartedAt;
				currentTimerValue =
					timerStoppedAt === undefined ? timerValue - (timerValue % 100n) : timerValue;
			}
		}, 100);
	});

	onDestroy(() => {
		clearInterval(timerInterval);
	});

	const getTimerColor = (timerStartedAt?: bigint, timerStoppedAt?: bigint) => {
		if (timerStartedAt === undefined) {
			return 'white';
		} else if (timerStartedAt !== undefined && timerStoppedAt === undefined) {
			return 'red';
		} else if (timerStartedAt !== undefined && timerStoppedAt !== undefined) {
			return 'green';
		} else {
			return 'white';
		}
	};

	$: {
		if (!timerStartedAt || !$buzzerState.lastTriggerTime) {
			break $;
		}

		if ($buzzerState.lastTriggerTime > timerStartedAt) {
			timerStoppedAt = $buzzerState.lastTriggerTime;
		}
	}
</script>

<div class="flex flex-col items-center gap-3 pb-6">
	<div class="w-full flex flex-row flex-wrap gap-3 justify-center">
		<div class="flex flex-grow flex-col items-center">
			{#if placeholder.length > 0}
				<span class="text-6xl font-bold text-white py-6 text-center"> {placeholder}</span>
			{:else}
				<span
					class="text-9xl font-bold"
					style="color: {getTimerColor(timerStartedAt, timerStoppedAt)};"
				>
					{(Number(currentTimerValue ?? 0) / 1000).toFixed(3)}
				</span>
			{/if}
		</div>
	</div>
</div>
