<script setup lang="ts">
import GameButton from "./GameButton.vue";
import ContactButton from "./ContactButton.vue";
import DownloadPlayButton from "./DownloadPlayButton.vue";
import Selector from "~/components/Common/ButtonSelector.vue";

const store = useHomeStore();

const { selectedButton, selectorPosition } = useButtonNavigation({
  buttons: {
    projects: [31, 23, 193, 49],
    contact: [31, 71, 97, 49],
    downloadPlay: [127, 71, 97, 49],
  },
  initialButton: "projects",
  onButtonClick: (button) => {
    store.animateOutro(`/${button}`);
  },
  navigation: {
    projects: {
      down: "last",
      left: "contact",
      right: "downloadPlay",
      horizontalMode: "preview",
    },
    contact: {
      up: "projects",
      right: "downloadPlay",
    },
    downloadPlay: {
      up: "projects",
      left: "contact",
    },
  },
});

const getButtonOffset = (button: (typeof selectedButton)["value"]) => {
  if (selectedButton.value === button) return store.outro.buttonOffsetY;
  return 0;
};

const getOpacity = (button?: (typeof selectedButton)["value"]) => {
  if (store.isIntro) return store.intro.stage1Opacity;
  if (selectedButton.value === button) return 1;
  if (store.isOutro) return store.outro.stage1Opacity;
  return 1;
};
</script>

<template>
  <GameButton
    :x="33"
    :y="25 + getButtonOffset('projects')"
    :opacity="getOpacity('projects')"
  />
  <DownloadPlayButton
    :x="128"
    :y="72 + getButtonOffset('downloadPlay')"
    :opacity="getOpacity('downloadPlay')"
  />
  <ContactButton
    :x="32"
    :y="72 + getButtonOffset('contact')"
    :opacity="getOpacity('contact')"
  />

  <Selector :rect="selectorPosition" :opacity="getOpacity()" />
</template>
