<script setup lang="ts">
import Background from "./Background.vue";
import Menus from "./Menus/Menus.vue";
import OptionsStartUp from "./Menus/Options/StartUp.vue";
import OptionsLanguage from "./Menus/Options/Language.vue";
import OptionsGbaMode from "./Menus/Options/GbaMode.vue";

const store = useSettingsStore();

const viewComponents: Record<string, Component> = {
  optionsStartUp: OptionsStartUp,
  optionsLanguage: OptionsLanguage,
  optionsGbaMode: OptionsGbaMode,
};

const currentViewComponent = computed(() => {
  if (store.currentView === "menu" || !store.currentView) return null;
  return viewComponents[store.currentView] || null;
});

const handleBackNavigation = (event: KeyboardEvent) => {
  if (event.key === "Escape" || event.key === "Backspace") {
    if (store.navigationStack.length > 0) {
      store.popNavigation();
      event.preventDefault();
    }
  }
};

onMounted(() => {
  store.$reset();
  window.addEventListener("keydown", handleBackNavigation);
});

onUnmounted(() => {
  window.removeEventListener("keydown", handleBackNavigation);
});
</script>

<template>
  <Background />
  <Menus v-if="store.currentView === 'menu'" />
  <component :is="currentViewComponent" v-else-if="currentViewComponent" />
</template>
