<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
    import OnlineClients from "@/components/online/ContactsOnline";
    import Countdown from "@/components/Countdown";
    export default {
        components: {Countdown, OnlineClients},
        computed: {
            loggedIn() {
                return this.$store.getters['auth/loggedIn'];
            },
            components() {
                return this.$store.state.layout.sidebarComponents;
            },
            token() {
                return this.$store.getters['auth/token'];
            },
            tokenExpiresIn() {
                if(typeof this.token === 'undefined') return 0;

                let expireDateInTime = (new Date(this.token.meta.expireDate)).getTime();
                let currentTime = (new Date()).getTime();

                return expireDateInTime - currentTime;
            }
        }
    }
</script>
<template>
    <div class="page-sidebar">
        <ul class="sidebar-menu">
            <li
                v-for="(component,key) in components"
                :key="key">
                <div v-if="component.type === 'separator'" class="nav-separator">
                    {{ component.name }}
                </div>
                <div v-if="component.type === 'link'">
                    <div v-if="!component.components">
                        <nuxt-link :to="component.url" class="sidebar-menu-link">
                            <i v-if="component.icon" :class="component.icon" /> {{ component.name }}
                        </nuxt-link>
                    </div>
                    <div v-if="component.components">
                        <div class="sidebar-submenu-title">
                            {{ component.name }}
                        </div>
                        <ul class="list-unstyled sidebar-submenu-components">
                            <li v-for="(subValue,subKey) in component.subcomponents" :key="subKey">
                                <nuxt-link :to="subValue.link" class="sidebar-menu-link">
                                    <i v-if="component.icon" :class="component.icon" /> {{ subValue.name }}
                                </nuxt-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>

        <div v-if="loggedIn" class="sidebar-info d-flex flex-column ml-3 mr-3 mb-1 mt-auto">
            <div class="mb-2">
                <online-clients />
            </div>
            <div v-if="token" class="text-muted">
                <i class="fa fa-clock pr-1"></i>
                Die Sitzung ist noch
                <countdown :time="tokenExpiresIn" class="text-success">
                    <template slot-scope="props">{{props.minutes}} Minute(n), {{props.seconds}} Sekunde(n)</template>
                </countdown>
                gültig.
            </div>
        </div>
    </div>
</template>

