<script setup lang="ts">
import OptionsMenu from "./OptionsMenu.vue";
import ClockMenu from "./ClockMenu.vue";
import UserMenu from "./UserMenu.vue";
import TouchScreenMenu from "./TouchScreenMenu.vue";
import Selector from "~/components/Common/ButtonSelector.vue";

const { selectedButton: selected, selectorPosition } = useButtonNavigation({
  buttons: {
    options: [31, 119, 49, 49],
    optionsLanguage: [31, 71, 49, 49],
    optionsGbaMode: [79, 71, 49, 49],
    optionsStartUp: [31, 23, 49, 49],

    clock: [79, 119, 49, 49],
    clockAlarm: [79, 71, 49, 49],
    clockTime: [127, 71, 49, 49],
    clockDate: [79, 23, 49, 49],

    user: [127, 119, 49, 49],
    userBirthday: [79, 71, 49, 49],
    userName: [127, 71, 49, 49],
    userMessage: [175, 71, 49, 49],
    userColor: [127, 23, 49, 49],

    touchScreen: [175, 119, 49, 49],
  },
  initialButton: "options",
  navigation: {
    options: {
      right: "clock",
      up: "optionsLanguage",
    },
    optionsLanguage: {
      down: "options",
      up: "optionsStartUp",
      right: "optionsGbaMode",
    },
    optionsGbaMode: {
      down: "options",
      left: "optionsLanguage",
      up: "optionsStartUp",
    },
    optionsStartUp: {
      right: "optionsGbaMode",
      down: "optionsLanguage",
    },

    clock: {
      left: "options",
      right: "user",
      up: "clockAlarm",
    },
    clockAlarm: {
      down: "clock",
      up: "clockDate",
      right: "clockTime",
    },
    clockTime: {
      down: "clock",
      left: "clockAlarm",
      up: "clockDate",
    },
    clockDate: {
      right: "clockTime",
      down: "clockAlarm",
    },

    user: {
      left: "clock",
      right: "touchScreen",
      up: "userName",
    },
    userBirthday: {
      down: "user",
      up: "userColor",
      right: "userName",
    },
    userName: {
      down: "user",
      left: "userBirthday",
      right: "userMessage",
      up: "userColor",
    },
    userMessage: {
      down: "user",
      left: "userName",
      up: "userColor",
    },
    userColor: {
      left: "userBirthday",
      right: "userMessage",
      down: "userName",
    },

    touchScreen: {
      left: "user",
    },
  },
});

const isMenuOpen = (menu: string) => {
  const regex = new RegExp(`^${menu}[A-Z]`);
  return regex.test(selected.value);
};

const isAnyOtherMenuOpen = (excludeMenu: string) => {
  return ["options", "clock", "user"]
    .filter((menu) => menu !== excludeMenu)
    .some((menu) => isMenuOpen(menu));
};
</script>

<template>
  <OptionsMenu
    :x="33"
    :y="121"
    :is-open="isMenuOpen('options')"
    :is-any-other-menu-open="isAnyOtherMenuOpen('options')"
  />
  <ClockMenu
    :x="81"
    :y="121"
    :is-open="isMenuOpen('clock')"
    :is-any-other-menu-open="isAnyOtherMenuOpen('clock')"
  />
  <UserMenu
    :x="129"
    :y="121"
    :is-open="isMenuOpen('user')"
    :is-any-other-menu-open="isAnyOtherMenuOpen('user')"
  />
  <TouchScreenMenu
    :x="177"
    :y="121"
    :opacity="1"
    :is-any-other-menu-open="isAnyOtherMenuOpen('touchScreen')"
  />

  <Selector :rect="selectorPosition" :opacity="1" />
</template>
