<script setup lang="ts">
// the out transition:
// clicked button goes up
// other buttons, including selector fade away, text + status bar of upper screen and clock hands fades away 2x faster
// other buttons + calendar + clock body finish fading away at the same time
// then we wait a bit, and new screen starts appearing

import GameButton from "./GameButton.vue";
import PictochatButton from "./PictochatButton.vue";
import DownloadPlayButton from "./DownloadPlayButton.vue";
import Selector from "~/components/Common/ButtonSelector.vue";

const store = useHomeStore();

const BUTTONS_CONFIG = {
  game: [31, 23, 193, 49],
  contact: [31, 71, 97, 49],
  downloadPlay: [127, 71, 97, 49],
} as const satisfies Record<string, ButtonConfig>;

type ButtonType = keyof typeof BUTTONS_CONFIG;

const { selectedButton, selectorPosition } = useButtonNavigation({
  buttons: BUTTONS_CONFIG,
  initialButton: "game",
  onButtonClick: (button) => {
    store.animateOutro(`/${button}`);
  },
  navigation: {
    game: {
      down: "last",
      left: "contact",
      right: "downloadPlay",
      horizontalMode: "preview",
    },
    contact: {
      up: "game",
      right: "downloadPlay",
    },
    downloadPlay: {
      up: "game",
      left: "contact",
    },
  },
});

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

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

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

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