<template>
    <nav class="navbar navbar-expand-md bg-dark py-3 d-print-none" data-bs-theme="dark">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="#">
            <span v-if="brandImage" class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon">
                <svg v-if="brandImage==='default'" class="bi bi-bell-fill" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"></path>
                </svg>
            </span>
            <span>{{ brandText }}</span>
        </a>
        <span v-if="!$store.getters.isAdmin" class="navbar-text text-light badge bg-secondary bg-gradient text-dark"><b>Entity:</b> {{ entity.name }}</span>
        <button class="navbar-toggler" data-bs-toggle="collapse" :data-bs-target="'#appNav'+navID"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
        <div :id="'appNav'+navID" class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item" :class="n.meta.type==='single'? '':'dropdown'"  v-for="n in navs" :key="n.name || n.path">
                    <a v-if="n.meta.type==='menu' && hasReadableChildren(n)" class="nav-link dropdown-toggle" :class="n.children.find((c)=>{return c.name==$route.name})==undefined? '': 'active'" href="#" role="button" data-bs-toggle="dropdown">{{ labels[n.name] }}</a>
                    <ul class="dropdown-menu" v-if="n.meta.type==='menu' && hasReadableChildren(n)">
                        <li v-for="c in n.children" :key="c.name || c.path" >
                            <router-link v-if="aclReads.includes(labels[c.name])" @click="(e)=>{e.target.parentElement.click();}" class="dropdown-item" :class="$route.name==c.name? 'active': ''"  :to="c.path">{{ labels[c.name] }}</router-link>
                            
                        </li>
                    </ul>
                    <router-link v-if="n.meta.type==='single' && aclReads.includes(labels[n.name])" class="nav-link" :class="$route.name==n.name? 'active': ''"  :to="n.path">{{ labels[n.name] }}</router-link>

                </li>                
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-danger" @click.prevent="logout()">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
</template>
<script>
//import floatSelect from '@/parts/floatSelect';
import { getCurrentInstance } from 'vue'
    export default{
        components:{
  //          floatSelect
        },
        props:{
            navs:{
                type:Array,
                default:()=>[{name:"default",path:'/'}]
            },
            labels:{
                type:Object,
                default:()=>({default:"Default Page"})
            },
            brandText:{
                type:String,
                default:"CDS"
            },
            brandImage:{
                type:String,
                default:null
            }
        },
        data(){
            return {
                navID:null,
                aclReads:[]                
            }
        },
        mounted(){
            this.aclReads=[];
            this.$store.getters.getUser.acl.forEach((a)=>{
                if(a.GroupModules.read){
                    this.aclReads.push(a.name);
                }
            });

            // Entity Headers is a utility view; surface it even if ACL module is absent.
            if (!this.aclReads.includes('Entity Headers')) {
                this.aclReads.push('Entity Headers');
            }

            this.navID=getCurrentInstance()?.uid;            
        },
        methods:{
            inChildren(arr){
                return arr
            },
            hasReadableChildren(navItem){
                if (!Array.isArray(navItem?.children)) return false;
                return navItem.children.some((child) => this.aclReads.includes(this.labels[child.name]));
            },
            logout(){
                this.$store.getters.getAxios.post('/authentication/logout').then((res)=>{
                    this.$store.dispatch('logout',{
                        message:res.data.msg,
                        title:res.data.title,
                        isLoggedIn:res.data.isLoggedIn,
                        type: res.data.isLoggedIn ? 'info' : 'warning'
                    });
                }).catch((err)=>{
                    console.log(err);
                });
            }
        },
        computed:{
            entityOptions(){
                return this.$store.getters.getUser.entities;
            },
            entityID(){
                return this.$store.getters.getEntity;
            },
            entity(){
                return this.entityOptions.find((e)=>{
                    return e.id==this.entityID;
                }) || {
                    id:0,name:"No Entity Selected"
                }
            }
        }
    }
</script>
