<template>
  <div class="flex flex-col h-full">
    <h1 class="font-800 text-9 p-10 pb-0">
	    {{ current.scene.name }}
    </h1>
    <div class="h-full flex space-x-4 p-10 pt-8 flex-grow overflow-hidden">
      <StepSelection class="w-1/2"/>
      <div class="w-1/2 flex flex-col space-y-4">
        <MessageEdit class="h-1/2"/>
        <ActorsOnStageBox class="h-1/2"/>
      </div>
    </div>
    <MusicProgressBar class="h-10"/>
  </div>
</template>

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

  onKeyStroke("ArrowRight", () => {
		const position = getNextValidPosition(state.position)
	  if (position !== null) goToPosition(position)
  })

  onKeyStroke("ArrowLeft", () => {
		const position = getPreviousValidPosition(state.position)
	  if (position !== null) goToPosition(position)
  })
</script>
