<template>
	<div class="flex flex-col overflow-hidden">
		<h1 class="font-800 text-9 px-4 pt-10 pb-0">
			{{ current.scene.name }}
		</h1>
		<div class="flex flex-col space-y-4 p-4 pt-8 flex-grow h-full overflow-hidden">
			<div class="flex justify-end">
				<button class="px-5 py-3 bg-green-600 font-bold text-5" @click="goNext()">
					Next
				</button>
			</div>
			<StepSelection class="h-110"/>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { current, getNextValidPosition, getPreviousValidPosition, state } from "../state"
	import { goToPosition } from "../syncing"
	import { onKeyStroke } from "@vueuse/core"
	import StepSelection from "../components/StepSelection.vue"

	function goNext() {
		const position = getNextValidPosition(state.position)
		if (position !== null) goToPosition(position)
	}

	function goPrevious() {
		const position = getPreviousValidPosition(state.position)
		if (position !== null) goToPosition(position)
	}

	onKeyStroke("ArrowLeft", goPrevious)
	onKeyStroke("ArrowRight", goNext)
</script>
