import { defineStore } from "pinia";
import { ref, computed, watch } from "vue";
import { Cookies } from "quasar";
import { permissionStore } from "src/stores/permission";

export const navigationStore = defineStore("navigation", () => {
  const navigationStructure = Object.freeze([
    {
      type: "single",
      title: "ui.navigation.carteirinha",
      name: "CarteirinhaPage",
      icon: "mdi-card-account-details-outline",
      disable: false,
      permission: true,
    },
    {
      type: "single",
      title: "ui.navigation.meu_perfil",
      name: "MeuPerfilPage",
      icon: "mdi-account-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.perfil",
    },
    {
      type: "single",
      title: "ui.navigation.partners",
      name: "ParceirosPage",
      icon: "mdi-handshake-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.convenio",
    },
    {
      type: "single",
      title: "ui.navigation.convenios",
      name: "ConveniosPage",
      icon: "mdi-hospital-box-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.convenio",
    },
    {
      type: "single",
      title: "ui.navigation.loja",
      name: "AssociadoLojaPage",
      icon: "mdi-cart-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.loja",
    },
    {
      type: "single",
      title: "ui.navigation.meus_interesses",
      name: "AssociadoInteressesPage",
      icon: "mdi-heart-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.interesses",
    },
    {
      type: "single",
      title: "ui.navigation.meus_agendamentos",
      name: "AssociadoAgendamentosPage",
      icon: "mdi-calendar-clock-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.agendamento",
    },
    {
      type: "single",
      title: "ui.navigation.notifications",
      name: "NotificacoesAssociadoPage",
      icon: "mdi-bell-outline",
      disable: false,
      permission: false,
      permissionScope: "associado.notificacao",
    },
  ]);

  const miniStateCookies = Cookies.get("miniState");
  const miniState = ref(miniStateCookies === "true" ? true : false);

  const toggleMini = () => {
    miniState.value = !miniState.value;
  };

  watch(miniState, (val) => {
    Cookies.set("miniState", val, { path: "/", sameSite: "Lax" });
  });

  const getNavigationAccess = () => {
    const { getAccess } = permissionStore();
    return navigationStructure
      .map((menu) => {
        if (!menu?.permissionScope) return menu;
        menu.permission = getAccess(menu.permissionScope, "menu");
        return menu;
      })
      .filter((menu) => menu !== null);
  };

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

  return {
    navigationItems,
    miniState,
    toggleMini,
  };
});
