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

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

type ButtonType = keyof typeof BUTTONS_CONFIG;

const animationPercentage = ref(0);

const { selectedButton, selectorPosition } = useButtonNavigation({
  buttons: BUTTONS_CONFIG,
  initialButton: "game",
  onButtonClick: (buttonName) => {
    if (animationPercentage.value > 0) return;
    gsap.fromTo(
      animationPercentage,
      { value: 0 },
      {
        value: 1,
        duration: 0.35,
        ease: "none",
        onComplete: () => {
          if (buttonName === "pictochat") {
            navigateTo("/contact");
          } else {
            throw new Error(`Not implemented: ${buttonName}`);
          }
        },
      },
    );
  },
  navigation: {
    game: {
      down: "last",
      left: "pictochat",
      right: "downloadPlay",
      horizontalMode: "preview",
    },
    pictochat: {
      up: "game",
      right: "downloadPlay",
    },
    downloadPlay: {
      up: "game",
      left: "pictochat",
    },
  },
});

const getButtonOffset = (button: ButtonType) => {
  if (selectedButton.value === button) return animationPercentage.value * -200;
  return 0;
};

const getOpacity = () => (1 - animationPercentage.value) * 100;
</script>

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

  <Selector
    :x="selectorPosition[0]"
    :y="selectorPosition[1]"
    :width="selectorPosition[2]"
    :height="selectorPosition[3]"
    :opacity="getOpacity()"
  />
</template>
