<template>
  <div id="app">
    <DefaultScreens :dev-preview="true" :preview-height-ratio="0.5">
      <template #left>
        <BootjeSideScreen v-if="isBootjeGame" />
        <SideScreenMiniGame
          v-else-if="isPuzzleGame"
          player-id="player1"
          screen-id="left"
          :controller-number="1"
        />
        <QuizSideScreen v-else-if="isQuizGame" />
        <GlassGameSideScreen v-else-if="isGlassGame" />
        <SideScoreScreen v-else />
      </template>

      <template #fullscreen></template>

      <GameFlow ref="gameFlowRef" :games="games" @flow-changed="handleFlowChanged" />

      <template #right>
        <BootjeSideScreen v-if="isBootjeGame" />
        <SideScreenMiniGame
          v-else-if="isPuzzleGame"
          player-id="player2"
          screen-id="right"
          :controller-number="2"
        />
        <QuizSideScreen v-else-if="isQuizGame" />
        <GlassGameSideScreen v-else-if="isGlassGame" />
        <SideScoreScreen v-else />
      </template>
    </DefaultScreens>
  </div>
</template>

<script setup lang="ts">
import { computed, markRaw, ref } from "vue";

import DefaultScreens from "../i-love-x-engine/src/components/ScreenXCube.vue";
import GameFlow from "../i-love-x-engine/core/GameFlow.vue";

// Challenges
import ConnectQuest from "../i-love-x-engine/src/challenges/connect-quest/ConnectQuest.vue";
import CatchGame from "../i-love-x-engine/src/challenges/CatchGame/CatchGame.vue";
import Puzzle from "../i-love-x-engine/src/challenges/puzzle/puzzle.vue";
import TowerGame from "../i-love-x-engine/src/challenges/Tower/TowerGame.vue";
import GlassGame from "../i-love-x-engine/src/challenges/GlassGame/views/Intro.vue";
import Quiz from "../i-love-x-engine/src/challenges/Quiz/Quiz.vue";
import Bootje from "../i-love-x-engine/src/challenges/bootje/views/Race.vue";

// Side Screens
import SideScreenMiniGame from "../i-love-x-engine/src/challenges/puzzle-mini-game/SideScreenMiniGame.vue";
import SideScoreScreen from "../i-love-x-engine/src/challenges/scorescreen/SideScoreScreen.vue";
import BootjeSideScreen from "../i-love-x-engine/src/challenges/bootje/views/SideScreen.vue";
import QuizSideScreen from "../i-love-x-engine/src/challenges/Quiz/views/SideScreen.vue";
import GlassGameSideScreen from "../i-love-x-engine/src/challenges/GlassGame/views/GlassGameSideScreen.vue";

const games: Record<string, any> = {
  "connect-quest": markRaw(ConnectQuest),
  "catch-game": markRaw(CatchGame),
  puzzle: markRaw(Puzzle),
  "tower-game": markRaw(TowerGame),
  "glass-game": markRaw(GlassGame),
  quiz: markRaw(Quiz),
  bootje: markRaw(Bootje),
};

const gameFlowRef = ref<any>(null);
const currentGameIndex = ref(0);

const isPuzzleGame = computed(
  () => currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "puzzle",
);

const isBootjeGame = computed(
  () => currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "bootje",
);

const isQuizGame = computed(
  () =>
    currentGameIndex.value === 4 ||
    (currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "quiz"),
);

const isGlassGame = computed(
  () => currentGameIndex.value === 2 && gameFlowRef.value?.selectedGame === "glass-game",
);

const handleFlowChanged = (index: number) => {
  currentGameIndex.value = index;
};
</script>
