<template>
  <div class="flex gap-6 p-4">
    <section class="w-80">
      <div class="font-bold text-2xl pb-2">Szene</div>
      <div class="flex flex-col overflow-y-auto bg-dark-900 bg-opacity-50 h-80vh">
        <template v-for="(scene, index) in script.scenesById.values()" :key="scene.id">
          <div v-if="index !== 0" class="w-full h-1px bg-dark-300"/>
          <div class="flex-shrink-0 bg-dark-600 flex items-center">
            <div class="px-3 py-2 flex-grow">
              {{ scene.label }}
            </div>
            <button v-if="game.currentScene.id === scene.id" disabled class="bg-green-900 h-full px-3 text-sm cursor-not-allowed">
              Aktiv
            </button>
            <button v-else class="bg-dark-300 h-full px-3 text-sm cursor-pointer" @click="game.switchScene(scene.id)">
              Aktivieren
            </button>
          </div>
        </template>
      </div>
    </section>
    <component :is="game.currentScene.type.crewView" :controller="game.currentScene.controller" :definition="game.currentScene.definition"/>
  </div>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
  import { script } from "../../shared/script"
  import { useGame } from "../game"

  const game = useGame()
</script>