import { defineStore } from "pinia";
import { computed } from "vue";
import { permissionStore } from "src/stores/permission";

export const navigationStore = defineStore("navigation", () => {
  const navigationStructure = Object.freeze([
    {
      type: "single",
      title: "ui.navigation.dashboard",
      name: "DashboardPage",
      icon: "mdi-poll",
      disable: false,
      permission: true,
    },
    {
      type: "single",
      title: "Alunos",
      name: "StudentPage",
      icon: "mdi-account-outline",
      disable: false,
      permission: true,
    },
    {
      type: "single",
      title: "Usuários",
      name: "UsersPage",
      icon: "mdi-account-multiple-outline",
      disable: false,
      permission: true,
    },
    {
      type: "single",
      title: "Dados da Unidade",
      name: "UnitEditPage",
      icon: "mdi-cog-outline",
      disable: false,
      permission: true,
    },
  ]);

  const getNavigationAccess = () => {
    const { getAccess } = permissionStore();
    return navigationStructure
      .map((menu) => {
        if (menu.type === "expansive") {
          if (getAccess(menu.permissionScope, "menu")) menu.permission = true;
          menu.childrens = menu.childrens.filter((children) => {
            if (!children?.permissionScope) return true;
            children.permission = getAccess(children.permissionScope, "menu");
            return children.permission;
          });
          return menu.childrens.length > 0 ? menu : null;
        } else {
          if (!menu?.permissionScope) return menu;
          menu.permission = getAccess(menu.permissionScope, "menu");
          return menu;
        }
      })
      .filter((menu) => menu !== null);
  };

  const navigationItems = computed(() => getNavigationAccess());

  return {
    navigationItems,
  };
});