export const SETTINGS_MENUS = [
  "options",
  "clock",
  "user",
  "touchScreen",
] as const;

export const SETTINGS_SUB_MENUS = [
  "optionsLanguage",
  "options2048",
  "optionsStartUp",
  "clockAchievements",
  "clockTime",
  "clockDate",
  "userBirthday",
  "userUserName",
  "userSnake",
  "userColor",
] as const;

export type SettingsMenu = (typeof SETTINGS_MENUS)[number];
export type SettingsSubMenu = (typeof SETTINGS_SUB_MENUS)[number];

export const useSettingsStore = defineStore("settings", {
  state: () => ({
    currentMenu: null as SettingsMenu | null,
    currentSubMenu: null as SettingsSubMenu | null,
    menuExpanded: false,
    selectedButton: "options" as SettingsMenu | SettingsSubMenu,
  }),

  actions: {
    openMenu(menu: SettingsMenu, expanded: boolean = false) {
      this.currentMenu = menu;
      this.menuExpanded = expanded;
      this.currentSubMenu = null;
    },

    openSubMenu(submenu: SettingsSubMenu) {
      this.currentSubMenu = submenu;

      const achievements = useAchievementsStore();
      if (!achievements.advancement.visitedSettings.includes(submenu)) {
        achievements.advancement.visitedSettings.push(submenu);
      }
      if (
        achievements.advancement.visitedSettings.length ===
        SETTINGS_SUB_MENUS.length
      ) {
        achievements.unlock("settings_visit_all");
      }
    },

    closeSubMenu() {
      this.currentSubMenu = null;
    },
  },
});