<!--
  - 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 { mapActions } from 'vuex'
    import UserAvatar from "@/components/user/UserAvatar";

    export default {
        components: {UserAvatar},
        computed: {
            id(vm) {
                return vm.$store.state.layout.navigationId;
            },
            components(vm) {
                return vm.$store.state.layout.navigationComponents;
            },

            sidebarOpen() {
                return this.$store.getters['layout/sidebarOpen']
            },

            loggedIn(vm)  {
                return vm.$store.getters['auth/loggedIn'];
            },
            user(vm)  {
                return vm.$store.state.auth.user;
            }
        },
        methods: {
            ...mapActions('layout', [
                'selectNavigation'
            ]),
            componentClick($index) {
                const component = this.components[$index];

                this.selectNavigation(component.id);

                if (typeof component.url !== 'undefined') {
                    this.$router.push(component.url)
                }
            },

            toggleSidebar() {
                this.$store.dispatch('layout/toggleSidebar');
            }
        }
    }
</script>
<template>
    <div>
        <header class="page-header fixed-top">
            <div class="header-title">
                <div class="toggle-box">
                    <button @click.prevent="toggleSidebar" type="button">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars"></i>
                    </button>

                    <button v-b-toggle="'page-navbar'" type="button" class="more">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
                <div class="logo">
                    <span>C</span>h<span>a</span>m<span>e</span>s<span>u</span>
                </div>
            </div>
            <nav class="page-navbar navbar-expand-md">
                <b-collapse id="page-navbar" class="navbar-content navbar-collapse flex-row justify-content-between">
                    <ul class="navbar-nav navbar-links">
                        <li v-for="(component,key) in components" :key="key" class="nav-item">
                            <a class="nav-link" :class="{'router-link-active': component.id === id }" @click.prevent="componentClick(key)" href="javascript:void(0)" >
                                <i v-if="component.icon" :class="component.icon" /> {{ component.name }}
                            </a>
                        </li>
                    </ul>
                    <ul v-if="loggedIn && user" class="navbar-nav navbar-gadgets">
                        <li class="nav-item">
                            <nuxt-link class="nav-link user-link"  :to="'/users/'+user.id">
                                <user-avatar :email="user.email" :name="user.name" :avatar="user.avatar" :size="28" />
                                <span class="user-name">{{ user.name }}</span>
                            </nuxt-link>
                        </li>
                        <li class="nav-item">
                            <nuxt-link :to="'/settings'" class="nav-link">
                                <i class="fa fa-cog" />
                            </nuxt-link>
                        </li>
                        <li class="nav-item">
                            <nuxt-link :to="'/logout'" class="nav-link">
                                <i class="fa fa-power-off" />
                            </nuxt-link>
                        </li>
                    </ul>
                </b-collapse>
            </nav>
        </header>
    </div>
</template>
