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

type ButtonConfig = {
  x: number;
  y: number;
  sx: number;
  sy: number;
  sw: number;
  sh: number;
};

const BUTTONS_CONFIG = {
  game: { x: 33, y: 25, sx: 31, sy: 23, sw: 193, sh: 49 },
  pictochat: { x: 32, y: 72, sx: 31, sy: 71, sw: 97, sh: 49 },
  downloadPlay: { x: 128, y: 72, sx: 127, sy: 71, sw: 97, sh: 49 },
} as const satisfies Record<string, ButtonConfig>;

type ButtonType = keyof typeof BUTTONS_CONFIG;

const selectedButton = ref<ButtonType>("game");
const nextBottomButton = ref<"downloadPlay" | "pictochat">("pictochat");

const selectorPosition = computed(() => BUTTONS_CONFIG[selectedButton.value]);

useScreenClick((x: number, y: number) => {
  for (const [buttonName, config] of Object.entries(BUTTONS_CONFIG)) {
    if (
      x >= config.sx &&
      x <= config.sx + config.sw &&
      y >= config.sy &&
      y <= config.sy + config.sh
    ) {
      selectedButton.value = buttonName as ButtonType;

      if (buttonName === "pictochat" || buttonName === "downloadPlay") {
        nextBottomButton.value = buttonName;
      }
      break;
    }
  }
});

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 " ":
      throw "Not implemented";
  }
};

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

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

<template>
  <GameButton :x="BUTTONS_CONFIG.game.x" :y="BUTTONS_CONFIG.game.y" />
  <DownloadPlayButton
    :x="BUTTONS_CONFIG.downloadPlay.x"
    :y="BUTTONS_CONFIG.downloadPlay.y"
  />
  <PictochatButton
    :x="BUTTONS_CONFIG.pictochat.x"
    :y="BUTTONS_CONFIG.pictochat.y"
  />

  <Selector
    :x="selectorPosition.sx"
    :y="selectorPosition.sy"
    :width="selectorPosition.sw"
    :height="selectorPosition.sh"
  />
</template>
