<script setup lang="ts">
import Background from "./Background.vue";
import Buttons from "./Buttons.vue";
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
import { promiseTimeout } from "@vueuse/core";

const store = useContactStore();
const achievements = useAchievementsStore();
const confirmationModal = useConfirmationModal();

const ACTIONS = {
  github: [
    "open",
    "contact.actions.githubProfile",
    "https://github.com/pihkaal",
  ],
  email: ["copy", "contact.actions.email", "hello@pihkaal.me"],
  website: ["copy", "contact.actions.websiteLink", "https://pihkaal.me"],
  cv: ["open", "contact.actions.cv", "https://pihkaal.me/cv"],
} as const satisfies Record<
  string,
  [action: "copy" | "open", verbKey: string, content: string]
>;

const { selected, selectorPosition } = useButtonNavigation({
  buttons: {
    github: [26, 27, 202, 42],
    email: [26, 59, 202, 42],
    website: [26, 91, 202, 42],
    cv: [26, 123, 202, 42],
  },
  navigation: {
    github: {
      down: "email",
    },
    email: {
      up: "github",
      down: "website",
    },
    website: {
      up: "email",
      down: "cv",
    },
    cv: {
      up: "website",
    },
  },
  initialButton: "github",
  onButtonClick: (button) => {
    actionateButton(button);
  },
  disabled: computed(() => store.isIntro || store.isOutro),
  selectorAnimation: {
    duration: 0.25,
    ease: "power2.out",
  },
});

const actionateButton = async (button: (typeof selected)["value"]) => {
  const [action, verbKey, content] = ACTIONS[button];
  const verb = $t(verbKey);
  if (action === "copy") {
    try {
      await navigator.clipboard.writeText(content);
      store.pushNotification($t("contact.copiedToClipboard", { item: verb }));
    } catch (error) {
      console.error("Failed to copy to clipboard:", error);
    }
  } else {
    const url = content.replace(/^https?:\/\//, "");
    confirmationModal.open({
      text: $t("contact.openUrl", { url }),
      onConfirm: async () => {
        store.pushNotification($t("contact.opened", { item: verb }));
        await promiseTimeout(100);
        await navigateTo(content, { open: { target: "_blank " } });

        await promiseTimeout(500);

        if (button === "github") {
          achievements.unlock("contact_git_visit");
        }
      },
    });
  }
};
</script>

<template>
  <Background />

  <Buttons />
  <ButtonSelector
    :rect="selectorPosition"
    :opacity="
      store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
    "
  />

  <CommonBars
    :title="$t('contact.title')"
    :opacity="
      store.isIntro ? store.intro.stage3Opacity : store.outro.stage2Opacity
    "
    :y-offset="store.isIntro ? store.intro.barOffsetY : 0"
  />
  <CommonConfirmationModal />
  <CommonButtons
    :y-offset="
      store.isIntro ? store.intro.barOffsetY : confirmationModal.buttonsYOffset
    "
    :opacity="
      store.isIntro
        ? store.intro.stage3Opacity
        : store.isOutro
          ? store.outro.stage2Opacity
          : 1
    "
    :b-label="$t('common.quit')"
    :a-label="$t(`contact.actions.${ACTIONS[selected][0]}`)"
    @activate-b="store.animateOutro()"
  />
</template>
