var VPSideBar = (function () {
    let vp_template = `<!-- # Sidenav Left -->
    <!-- Offcanvas -->
    <div class="offcanvas offcanvas-start" id="affanOffcanvas" data-bs-scroll="true" tabindex="-1" aria-labelledby="affanOffcanvsLabel">
        <button class="btn-close btn-close-white text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        <div class="offcanvas-body p-0">
            <!-- Side Nav Wrapper -->
            <div class="sidenav-wrapper">
                <!-- Sidenav Profile -->
                <div class="sidenav-profile bg-gradient">
                    <div class="sidenav-style1"></div>
                    <!-- User Thumbnail -->
                    <div class="user-profile"><img :src="$store.state.config.person.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+$store.state.config.person.nama"></div>
                    <!-- User Info -->
                    <div class="user-info">
                        <h6 class="user-name mb-0">{{person.nama}}</h6>
                        <span>{{person.nomor_induk}}</span>
                        <p>
                            <span class="badge bg-success rounded-pill mx-1">{{person.kelas}}</span>
                            <span class="badge bg-warning rounded-pill mx-1">{{person.ruang}}</span>
                        </p>
                        <span class="badge bg-danger rounded-pill mx-1">{{person.jurusan}}</span>
                    </div>
                </div>
                <!-- Sidenav Nav -->
                <ul class="sidenav-nav ps-0">
                    <li v-for="m in $store.state.config.sidebar_menu"><a :href="m.url"><i :class="m.icon"></i>{{m.name}}<span v-if="badgeValid(m.badge)" :class="'bg-'+m.badge.type" class="badge rounded-pill ms-2">{{m.badge.count}}</span></a></li>
                    <li><a :href="$store.state.config.base_url+'/logout'"><i class="bi bi-box-arrow-right"></i>Keluar</a></li>
                </ul>
                <div class="copyright-info">
                    <p>{{ new Date().getFullYear() }} &copy; by Candy</p>
                </div>
            </div>
        </div>
    </div>`;
    return {
        template: vp_template,
        name: 'sidebar',
        mounted() {
            this.initMenu();
        },
        computed: {
            pengumuman() {
                return this.$store.state.config.pengumuman;
            },
            person() {
                return this.$store.state.config.person;
            },
        },
        watch: {
            pengumuman(v) {
                this.loadPengumuman();
            },
        },
        methods: {
            initMenu() {

                axios({
                    method: 'get',
                    url: '/utils/sidebar',
                }).then((response) => {

                    if (!isObject(response.data)) return;
                    this.$store.commit('config/sidebar_menu', response.data.menu);
                    this.loadJadwalUjian();
                    this.loadJadwalPelajaran();
                    this.loadPengumuman();
                }, (error) => {
                });
            },
            badgeValid(badeg) {
                if (typeof badeg == 'undefined') return false;
                if (badeg.count <= 0) return false;
                return true;
            },
            loadJadwalUjian() {
                axios({
                    method: 'get',
                    url: '/ujian/jadwal/all',
                }).then((response) => {
                    if (!isObject(response.data)) return;
                    if (response.data.length < 1) return;
                    let menu = this.$store.state.config.sidebar_menu;
                    let jui = menu.findIndex(v => v.name == "Jadwal Ujian");
                    if (jui != -1) {
                        let notYet = response.data.filter(v => v.status == 0).length;
                        let ongoing = response.data.filter(v => v.status == 1).length;
                        menu[jui].badge.count = response.data.length;
                        menu[jui].badge.type = notYet == response.data.length ? 'danger' : (ongoing > 0 ? 'warning' : 'success');
                    }
                    this.$store.commit('config/sidebar_menu', menu);
                }, (error) => {
                });
            },
            loadJadwalPelajaran() {
                this.$store.dispatch('config/loadJadwalPelajaran', {
                    success: (response) => {
                        let menu = this.$store.state.config.sidebar_menu;
                        let jki = menu.findIndex(v => v.name == "Jadwal Kelas");
                        if (jki >= 0) {
                            menu[jki].badge.type = 'success';
                            menu[jki].badge.count = response.data.length;
                            this.$store.commit('config/sidebar_menu', menu);
                        }
                    }
                })
            },
            loadPengumuman() {
                let menu = this.$store.state.config.sidebar_menu;
                let pi = menu.findIndex(v => v.name == "Pengumuman");
                if (pi != -1) {
                    menu[pi].badge.count = this.pengumuman.length;
                }
                this.$store.commit('config/sidebar_menu', menu);
            },
        }
    }
})();