<script>

	import Visualization from './Visualization.svelte';
	import { config } from './stores.js';

	import './vendor/normalize.css';
	import './vendor/milligram.min.css';

	let isAnimated = false;
	let splitscreen = false;
	let controlsOpen = false;
	let left, right;

	function handleKeyboard(event) {
	switch (event.code) {
		case 'ArrowLeft':
			//i = (i>0) ? i-1 : data.length-1;
			event.preventDefault();
			break;

		case 'ArrowRight':
			//i = (i<data.length-1) ? i+1 : 0;
			event.preventDefault();
			break;

		case 'ArrowUp':
			$config.speed += 10;
			event.preventDefault();
			break;

		case 'ArrowDown':
			$config.speed -= 10;
			event.preventDefault();
			break;

		case 'Space':
			isAnimated = !isAnimated;
			event.preventDefault();
			break;		
	}
	//log current index on the lower right
}

function reset() {
	left.reset();
	if (splitscreen) {
		right.reset();
	}
}

</script>

<svelte:window on:keydown={handleKeyboard} />

<main>
	<Visualization bind:this={left} {isAnimated}/>
	{#if splitscreen}<Visualization bind:this={right} {isAnimated}/>{/if}
</main>
<aside class:open={controlsOpen}>
	<label class="hideCheckbox toggle" title="Open Controls">⚙<input type="checkbox" bind:checked={controlsOpen}></label>
	<div id="controls">
		<h3>Controls</h3>
		<p><small>Press Space to pause and use arrow keys to skip or change speed</small></p>
		<label>Zoom:<br/><input type="number" id="zoom" step="1" value={$config.zoom} on:change={e => $config.zoom = e.target.value}></label>
		<label>Speed:<br/><input type="number" id="speed" step="1" value={$config.speed} on:change={e => $config.speed = e.target.value}></label>
		<label>Duration Multiplier:<br/><input type="number" id="duration_multiplier" step="0.1" value={$config.duration_multiplier} on:change={e => $config.duration_multiplier = e.target.value}></label>
		<label>Trace Length:<br/><input type="number" id="trace_length" step="1" value={$config.trace_length} on:change={e => $config.trace_length = e.target.value}></label>
		<label>Duration Function Exponent:<br/><input type="number" id="exp" step="0.1" value={$config.duration_exponent} on:change={e => $config.duration_exponent = e.target.value}></label>
	</div>
	<label id="run" class="hideCheckbox toggle" title="Run Animation">{#if !isAnimated}▶{:else}⏸{/if}<input type="checkbox" bind:checked={isAnimated}></label>
	<label id="split" class="hideCheckbox toggle" title="Make Splitscreen">{#if !splitscreen}🗖{:else}🗗{/if}<input type="checkbox" bind:checked={splitscreen}></label>
	<span id="reset" class="toggle" title="Reset Animation" on:click={reset}>↶</span>
</aside>

<style>

	main {
		display: flex;
		height: 100%;
		width: 100%;
	}

	aside {
		position: absolute;
		left: -20vw;
		transition: left 0.5s;
		top: 0;
		bottom: 0;
		width: 20vw;
		padding: 20px;
		background: white;
	}

	.open {
		left: 0;
	}

	.toggle {
		position: absolute;
		right: -30px;
		width: 20px;
		font-size: 20px;
		line-height: 20px;
		cursor: pointer;
		text-align: center;
		transition: left 0.5s;
		margin: 0;
		font-family: monospace;
	}

	.hideCheckbox > input {
		position: absolute;
		left: -9999px;
	}

	#run {
		bottom: 100px;
	}

	#split {
		bottom: 60px;
	}

	#reset {
		bottom: 20px;
	}
</style>