<template>
  <div class="flex h-screen w-screen bg-black text-white">
    <!-- Sidebar -->
    <Sidebar
        :tags="tags"
        :selectedTag="selectedTag"
        @selectTag="store.selectTag"
        @openOptions="optionsOpen = true"
    />

    <!-- Main Content -->
    <div class="flex flex-col flex-1 overflow-hidden">
      <div class="flex-1 overflow-hidden">
        <GamePreview
            :game="selectedGame"
            @qr="store.showQr"
        />
      </div>
      <GameCarousel
          :games="store.filteredGames"
          :selectedGame="selectedGame"
          :selectedTag="selectedTag"
          :direction="transitionDirection"
          @selectGame="store.selectGame"
      />
    </div>

    <OptionsModal v-if="optionsOpen" @close="optionsOpen = false" />
    <QrModal v-if="qrLink" :link="qrLink" @close="qrLink = ''" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import Sidebar from './components/Sidebar.vue';
import GamePreview from './components/GamePreview.vue';
import GameCarousel from './components/GameCarousel.vue';
import OptionsModal from './components/OptionsModal.vue';
import QrModal from './components/QrModal.vue';
import { useKeyboardNavigation } from './utils/use-keyboard-navigation';
import { fetchGames } from './services/game-service';
import { useAppStore } from "./stores/app-store";
import { storeToRefs } from "pinia";
import { KeyboardManager } from "./utils/keyboard-manager";

const store = useAppStore();
const { selectedTag, selectedGame, tags, games, transitionDirection, qrLink } = storeToRefs(store);

const optionsOpen = ref(false);

onMounted(async () => {
  games.value = await fetchGames();
  tags.value = [...new Set(games.value.flatMap(game => game.Genres.split(",")))];
  store.selectTag(tags.value[0])
});

KeyboardManager.switchContext("sidebar")
useKeyboardNavigation();
</script>

<style scoped>
body {
  overflow: hidden;
}
</style>
