'use strict'
let temp_sidebar = `
<aside class="sidebar-nav-wrapper" :class="hide?'active':''" >

    <div class="navbar-logo">
        <a v-show="$store.state.config.favicon" :href="dashboard_url">
            <div class="row">
                <div class="col-lg-3">
                    <img :src="$store.state.config.favicon" style="max-width:65px" class="w-100" alt="logo"> 
                </div>
                <div class="col-lg-9 my-auto">
                    <h5>{{$store.state.config.appname}}</h5>
                </div>
            </div>
        </a>
    </div>
    <nav class="sidebar-nav">
        <div v-if="menu.length<1" class="text-center">
            <div class="spinner-grow" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <ul>
            <template v-for="(v,i) in menu">
                <template v-if="v.child.length">
                <li class="nav-item nav-item-has-children" :class="v.active?'active':''">
                    <a @click="resetMenu(i)" :href="v.url||'javascript:void(0)'" :class="v.active?'':'collapsed'" data-bs-toggle="collapse" :data-bs-target="'#ddmenu_'+i" :aria-controls="'#ddmenu_'+i" :aria-expanded="v.active?'true':'false'" aria-label="Toggle navigation">
                        <span class="icon" >
                            <i :class="v.icon" style="font-weight:bolder;font-size:x-large;"></i>
                        </span>
                        <span class="text">{{v.name}}</span>
                    </a>
                    <ul :id="'#ddmenu_'+i"  :class="(v.active?'show':'')+' collapse'" class="dropdown-nav">
                        <li v-for="c in v.child">
                            <a :class="c.active?'active':''" :href="c.url||'javascript:void(0)'">
                                {{c.name}} </a>
                        </li>
                    </ul>
                </li>

            </template>
            <template v-else>
                <li class="nav-item" :class="v.active?'active':''">
                    <a :href="v.url||'javascript:void(0)'">
                        <span class="icon" >
                            <i :class="v.icon" style="font-weight:bolder;font-size:x-large;"></i>
                        </span>
                        <span class="text">{{v.name}}</span>
                    </a>
                </li>
            </template>
            </template>
        </ul>
    </nav>
</aside>
`;

var VSidebar = {
    name: "sidebar",
    props: ['hide'],
    emits: ['check'],
    data() {
        return {
            dashboard_url: '',
            menu: [],
        }
    },
    options: {
        compilerOptions: {
            isCustomElement: tag => tag === this.name
        }
    },
    template: temp_sidebar,
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            axios({
                method: 'get',
                url: this.$store.state.config.base_url + '/panel/utils/sidebar',
            }).then((response) => {
                if (!isObject(response.data)) return setTimeout(this.loadData, 1000);
                this.dashboard_url = response.data.dashboard_url;
                this.$store.commit('config/appname', response.data.appname);
                this.$store.commit('config/favicon', response.data.favicon);
                this.menu = this.parseMenu(response.data.menu)
            }, (error) => {
            });
        },
        absoluteURL(url) {
            let pattern = /^(?:ftp|https?|feed)?:?\/\/(?:(?:(?:[\w\.\-\+!$&'\(\)*\+,;=]|%[0-9a-f]{2})+:)*(?:[\w\.\-\+%!$&'\(\)*\+,;=]|%[0-9a-f]{2})+@)?(?:(?:[a-z0-9\-\.]|%[0-9a-f]{2})+|(?:\[(?:[0-9a-f]{0,4}:)*(?:[0-9a-f]{0,4})\]))(?::[0-9]+)?(?:[\/|\?](?:[\w#!:\.\?\+\|=&@$'~*,;\/\(\)\[\]\-]|%[0-9a-f]{2})*)?$/;
            return pattern.test(url);
        },
        isActive(url) {
            let r = false;
            if (typeof url == 'object') {
                url.forEach(path => {
                    if (window.location.href.includes(path)) {
                        r = true;
                    }
                })
            } else if (typeof url == 'string') {
                r = window.location.href.includes(url);
            }
            return r;
        },
        resetMenu(i) {
            this.menu.map((elem, index) => {
                elem.child.forEach((ce, ci) => {
                    elem.child[ci].active = window.location.href.includes(ce.url);
                    elem.active_url.push(ce.url);
                    elem.child[ci].url = this.absoluteURL(ce.url) ? ce.url : this.$store.state.config.base_url + '/' + ce.url;
                })
                elem.url = this.absoluteURL(elem.url) ? elem.url : this.$store.state.config.base_url + '/' + elem.url;
                elem.active = index == i ? !elem.active : false;
            })
        },
        parseMenu(data) {
            data.map(elem => {
                elem.child.forEach((ce, ci) => {
                    elem.child[ci].active = window.location.href.includes(ce.url);
                    elem.active_url.push(ce.url);
                    elem.child[ci].url = this.absoluteURL(ce.url) ? ce.url : this.$store.state.config.base_url + '/' + ce.url;
                })
                elem.url = this.absoluteURL(elem.url) ? elem.url : this.$store.state.config.base_url + '/' + elem.url;
                elem.active = this.isActive(elem.active_url);
                elem.active = elem.active ? true : window.location.href == elem.url;
            })
            return data;
        },
    }
}

