<template>
    <div>
      <nav-links v-if="isLoggedIn && (isAdmin || $store.getters.getEntity!=0)" :navs="filteredNavs" :labels="routeNames" brand-text="Core-Decimal Solutions" brand-image="default"></nav-links>
      <router-view v-if="isLoggedIn && (isAdmin || $store.getters.getEntity>0)"/>
      <login-form v-else-if="!isLoggedIn"/>
      <entitySelectorForm v-if="isLoggedIn && !isAdmin && $store.getters.getEntity==0"/>
  
      
      <alert-stack/>
    </div>
    
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
.hand{
  cursor: pointer;
}
.shadow{
    box-shadow: #00000052 0 0 15px 10px !important;
  }
@media print {
  .p-none{
    display:none;
  }
}
</style>
<script>
import navLinks from './components/navLinks.vue';
import loginForm from './components/auth/loginForm.vue';
import alertStack from './components/info/alertStack.vue';
import entitySelectorForm from './components/auth/entitySelectorForm.vue';
export default{
  components:{
    navLinks, loginForm, alertStack,entitySelectorForm
  },
  data(){
    return {
      routeNames:{
        home: "Home Page",
        about:"About Us",
        contact:"Contact Us",
        options:"Options",
        settings:"Setttings",
        profile:"Profile",
        "entity headers":"Entity Headers",
        login:"Login",
        bank:"Bank",
        "bank account":"Bank Account",
        "bank branch":"Bank Branch",
        "masters":"Masters",
        billable:"Billable",
        entity:"Entity",
        "payee entity":"Payee Entity",
        tax:"Tax",
        "invoice template":"Invoice Template",
        invoice:"Generate Invoice",
        "invoice management":"Invoice Management",
        "view invoice":"View Invoice",
        "administration":"Administration",
        "admin users":"User",
      }
    }
  },
  computed:{
    isLoggedIn(){
      return this.$store.getters.isLoggedIn;
    },
    isAdmin(){
      return this.$store.getters.isAdmin;
    },
    isUserGroupMember(){
      return this.$store.getters.isUserGroupMember;
    },
    filteredNavs(){
      const adminExclude = ['masters', 'invoice management'];
      const regularExclude = ['administration', 'admin users'];
      const routes = this.$router.getRoutes();

      if (this.isAdmin) {
        return routes.filter(r => !adminExclude.includes(r.name));
      }

      if (!this.isUserGroupMember) {
        return routes.filter(r => !regularExclude.includes(r.name) && !adminExclude.includes(r.name));
      }

      return routes.filter(r => !regularExclude.includes(r.name));
    }
  },
  watch: {
    isLoggedIn() {
      this.enforceRouteAccess();
    },
    isAdmin() {
      this.enforceRouteAccess();
    },
    isUserGroupMember() {
      this.enforceRouteAccess();
    },
    '$route.fullPath'() {
      this.enforceRouteAccess();
    }
  },
  methods: {
    enforceRouteAccess() {
      const needsAdmin = this.$route.matched.some((record) => record.meta?.requiresAdmin);
      const needsUserGroup = this.$route.matched.some((record) => record.meta?.requiresUserGroup);

      if (needsAdmin && this.isLoggedIn && !this.isAdmin) {
        this.$store.commit('addAlert', {
          title: 'Access Denied',
          message: 'You are not allowed to access this page.',
          type: 'danger'
        });
        this.$router.replace('/');
        return;
      }

      if (needsUserGroup && this.isLoggedIn && !this.isUserGroupMember) {
        this.$store.commit('addAlert', {
          title: 'Access Denied',
          message: 'Only User group members can access this page.',
          type: 'danger'
        });
        this.$router.replace('/');
      }
    }
  },
  async mounted(){
    /* console.log(this.$store.getters.getAxios); */
            await this.axios.get('/authentication/checklogin',)
                  .then(response => {
                    this.$store.commit('setAxiosInstance', this.axios);     
                    this.$store.commit('setUser', response.data.userData);
                    this.$store.commit('setIsLoggedIn', response.data.isLoggedIn);           
                    this.$store.commit('addAlert', {
                        title: response.data.title,
                        message: response.data.msg,
                        type: response.data.isLoggedIn ? 'success' : 'danger'
                    });
                    this.enforceRouteAccess();
                });
    
  }
}
</script>