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

const { onRender } = useScreen();

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

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

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

    if (button === "achievements") {
      store.animateOutro("achievements");
      return;
    }

    store.animateOutro(button);
  },
  navigation: {
    projects: {
      down: "last",
      left: "contact",
      right: "gallery",
      horizontalMode: "preview",
    },
    contact: {
      up: "projects",
      right: "gallery",
      down: "settings",
    },
    gallery: {
      up: "projects",
      left: "contact",
      down: "settings",
    },
    theme: {
      right: "settings",
    },
    settings: {
      left: "theme",
      up: "last",
      right: "achievements",
    },
    achievements: {
      left: "settings",
    },
  },
  disabled: computed(() => store.isIntro || store.isOutro),
  selectorAnimation: {
    duration: 0.13,
    ease: "none",
  },
});

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

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

onRender((ctx) => {
  ctx.globalAlpha = getOpacity();

  // gallery
  ctx.font = "7px NDS7";
  ctx.fillStyle = "#2c2c2c";
  fillTextCentered(
    ctx,
    $t("home.photoGallery"),
    132,
    78 + getButtonOffset("gallery"),
    87,
  );

  // game
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#282828";
  const projectsText = $t("home.projectsAndExperiences");
  const lines = projectsText.split("\n");

  ctx.textBaseline = "top";

  if (lines.length == 1) {
    fillTextHCentered(
      ctx,
      projectsText,
      79,
      42 + getButtonOffset("projects"),
      140,
    );
  } else {
    fillTextHCentered(
      ctx,
      lines[0]!,
      82,
      36 + getButtonOffset("projects"),
      140,
    );
    fillTextHCentered(
      ctx,
      lines[1]!,
      82,
      36 + getButtonOffset("projects") + 13,
      140,
    );
  }
  ctx.textBaseline = "alphabetic";

  // gba thing
  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.images.home.bottomScreen.buttons.game"
  />
  <Button
    :x="32"
    :y="72 + getButtonOffset('contact')"
    :opacity="getOpacity('contact')"
    :image="assets.images.home.bottomScreen.buttons.contact"
  />
  <Button
    :x="128"
    :y="72 + getButtonOffset('gallery')"
    :opacity="getOpacity('gallery')"
    :image="assets.images.home.bottomScreen.buttons.gallery"
  />

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

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

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