<script setup lang="ts">
import GameButton from "./GameButton.vue";
import PictochatButton from "./PictochatButton.vue";
import DownloadPlayButton from "./DownloadPlayButton.vue";

type ButtonType = "game" | "downloadPlay" | "pictochat";

const selectedButton = ref<ButtonType>("game");
const nextBottomButton = ref<Exclude<ButtonType, "game">>("downloadPlay");

const handleKeyPress = (event: KeyboardEvent) => {
  switch (event.key) {
    case "ArrowUp":
      event.preventDefault();
      if (
        selectedButton.value === "downloadPlay" ||
        selectedButton.value === "pictochat"
      ) {
        selectedButton.value = "game";
      }
      break;

    case "ArrowDown":
      event.preventDefault();
      if (selectedButton.value === "game") {
        selectedButton.value = nextBottomButton.value;
      }
      break;

    case "ArrowRight":
      event.preventDefault();
      if (selectedButton.value === "game") {
        nextBottomButton.value = "downloadPlay";
      } else if (selectedButton.value === "pictochat") {
        nextBottomButton.value = "downloadPlay";
        selectedButton.value = "downloadPlay";
      }
      break;

    case "ArrowLeft":
      event.preventDefault();
      if (selectedButton.value === "game") {
        nextBottomButton.value = "pictochat";
      } else if (selectedButton.value === "downloadPlay") {
        nextBottomButton.value = "pictochat";
        selectedButton.value = "pictochat";
      }
      break;

    case "Enter":
    case " ":
      event.preventDefault();
      throw new Error("Not implemented");
  }
};

onMounted(() => {
  window.addEventListener("keydown", handleKeyPress);
});

onUnmounted(() => {
  window.removeEventListener("keydown", handleKeyPress);
});
</script>

<template>
  <GameButton :selected="selectedButton === 'game'" />
  <DownloadPlayButton :selected="selectedButton === 'downloadPlay'" />
  <PictochatButton :selected="selectedButton === 'pictochat'" />
</template>
