<template>
  <div class="flex gap-6 p-4">
    <section class="w-80">
      <div class="font-bold text-2xl pb-2">Raum</div>
      <div class="flex flex-col overflow-y-auto bg-dark-900 bg-opacity-50 h-80vh">
        <template
          v-for="(room, index) in script.roomsById.values()"
          :key="room.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">
              {{ room.label }}
            </div>
            <button v-if="game.currentRoomId === room.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" @click="game.switchRoom(room.id)">
              Aktivieren
            </button>
          </div>
        </template>
      </div>
    </section>
    <section class="flex-grow">
      <div class="font-bold text-2xl pb-2">Versteckte Objekte</div>
      <div class="grid gap-3 grid-cols-2 flex-grow auto-rows-min p-4 pt-0 relative">
        <button
            v-for="object in game.allObjectsById.values().filter(o => !game.visibleObjectIds.has(o.id))"
            :key="object.id"
            class="flex flex-col items-center gap-2 bg-dark-600 rounded-lg p-3"
            @click="game.setObjectVisibility(object.id, true)"
        >
          <ObjectPicture :object-id="object.id"/>
          <span class="text-sm text-gray-200 text-center">
            {{ object.label }}
          </span>
        </button>
      </div>
    </section>
    <section class="w-80">
      <div class="font-bold text-2xl pb-2">Interaktionen</div>
      <transition name="fade" mode="out-in">
        <div v-if="game.sortedInteractionQueue.length === 0" class="text-xl text-gray-200">
          Keine Interaktionen vorhanden.
        </div>
        <transition-group v-else tag="div" name="list" class="flex flex-col gap-4 relative h-80vh">
          <InteractionQueueItemCard
              v-for="(item, index) in game.sortedInteractionQueue"
              :key="item.id"
              :style="{ zIndex: 1000 - index }"
              :item="item"
              mode="director"
          />
        </transition-group>
      </transition>
    </section>
  </div>
</template>

<style module lang="scss">

</style>

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

  const game = useGame()
</script>