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

const store = useHomeStore();
const { assets } = useAssets();

const { selectedButton, selectorPosition } = useButtonNavigation({
  buttons: {
    projects: [31, 23, 193, 49],
    contact: [31, 71, 97, 49],
    downloadPlay: [127, 71, 97, 49],

    theme: [0, 167, 31, 26],
    settings: [112, 167, 31, 26],
    alarm: [225, 167, 31, 26],
  },
  initialButton: "projects",
  onButtonClick: (button) => {
    if (button === "downloadPlay" || button === "theme" || button === "alarm")
      throw new Error(`Not implemented: ${button}`);

    store.animateOutro(button);
  },
  navigation: {
    projects: {
      down: "last",
      left: "contact",
      right: "downloadPlay",
      horizontalMode: "preview",
    },
    contact: {
      up: "projects",
      right: "downloadPlay",
      down: "settings",
    },
    downloadPlay: {
      up: "projects",
      left: "contact",
      down: "settings",
    },
    theme: {
      right: "settings",
    },
    settings: {
      left: "theme",
      up: "last",
      right: "alarm",
    },
    alarm: {
      left: "settings",
    },
  },
});

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;
};

useRender((ctx) => {
  ctx.globalAlpha = getOpacity();
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#a2a2a2";
  fillTextCentered(ctx, $t("home.greeting"), 79, 135, 140);
});
</script>

<template>
  <Button
    :x="33"
    :y="25 + getButtonOffset('projects')"
    :opacity="getOpacity('projects')"
    :image="assets.home.bottomScreen.buttons.game"
  />
  <Button
    :x="32"
    :y="72 + getButtonOffset('contact')"
    :opacity="getOpacity('contact')"
    :image="assets.home.bottomScreen.buttons.contact"
  />
  <Button
    :x="128"
    :y="72 + getButtonOffset('downloadPlay')"
    :opacity="getOpacity('downloadPlay')"
    :image="assets.home.bottomScreen.buttons.downloadPlay"
  />

  <Button
    :x="33"
    :y="121"
    :opacity="getOpacity()"
    :image="assets.home.bottomScreen.buttons.gamePak"
  />

  <Button
    :x="10"
    :y="175 + getButtonOffset('theme')"
    :opacity="getOpacity('theme')"
    :image="assets.home.bottomScreen.buttons.theme"
  />
  <Button
    :x="117"
    :y="170 + getButtonOffset('settings')"
    :opacity="getOpacity('settings')"
    :image="assets.home.bottomScreen.buttons.settings"
  />
  <Button
    :x="235"
    :y="175 + getButtonOffset('alarm')"
    :opacity="getOpacity('alarm')"
    :image="assets.home.bottomScreen.buttons.alarm"
  />

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