<script lang="ts">
	import '@fontsource/atkinson-hyperlegible';
	import '@fontsource/atkinson-hyperlegible/700.css';
	import 'normalize.css/normalize.css';

	import { onMount, tick } from 'svelte';
	import SectorIndicator from './components/SectorIndicator.svelte';
	import FlashIndicator from './components/FlashIndicator.svelte';
	import Scale from './components/Scale.svelte';

	interface Props {
		frame?: number;
		fps?: number;
		debug?: boolean;
	}

	let { frame = $bindable(0), fps = $bindable(60), debug = $bindable(false) }: Props = $props();

	window.setFps = async (newFps: number) => {
		fps = newFps;
		await tick();
	};

	window.setFrame = async (frameNumber: number) => {
		frame = frameNumber;
		await tick();
	};

	onMount(() => {
		if (window.location.search.includes('debug')) {
			debug = true;
		}

		if (window.location.search.includes('play')) {
			setInterval(() => {
				frame++;
				frame %= fps * 4;
			}, 1000 / fps);
		}

		if (window.location.search.includes('frame')) {
			const frameNumber = parseInt(window.location.search.split('frame=')[1]);
			if (!isNaN(frameNumber)) {
				frame = frameNumber;
			}
		}
	});
</script>

<main class:debug>
	<div class="cyclic">
		<div class="circular sector">
			<SectorIndicator {frame} {fps} />
		</div>

		<div class="circular flash">
			<FlashIndicator {frame} {fps} />
		</div>
	</div>

	<div class="scale">
		<Scale {frame} {fps} />
	</div>

	{#if debug}
		<div class="controls">
			<input type="range" min="0" max={fps * 4} bind:value={frame} />
			<div class="label">{frame} ({frame % fps}) / {Math.round((frame / fps) * 100) / 100} s)</div>
		</div>
	{/if}
</main>

<style>
	main {
		width: 100vw;
		height: 100vh;

		color: white;
		--color-active: red;
		--color-inactive: white;

		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;

		font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
		font-variant-numeric: tabular-nums;
	}

	.circular {
		width: 25vw;
		height: 25vw;
	}

	.cyclic {
		width: 100vw;

		display: flex;
		justify-content: space-evenly;
	}

	.scale {
		width: 80vw;
	}

	main.debug {
		background: black;
	}

	.controls {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80vw;

		text-align: center;

		& input {
			width: 100%;
		}
	}
</style>
