import { Component } from '../../lib/vues6/vues6.js'
import { event_bus } from '../service/EventBus.service.js'
import { session } from '../service/Session.service.js'
import { action_service } from '../service/Action.service.js'

const template = `
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <button id="menu-toggle" class="btn" @click="toggle_sidebar">
        <i class="fa fa-ellipsis-v"></i>
    </button>
    <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target='#navbarSupportedContent'
        aria-controls='navbarSupportedContent'
        aria-expanded='false'
        aria-label='Toggle navigation'
    >
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbarSupportedContent" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item dropdown">
                <a
                    href="#"
                    role='button'
                    data-toggle='dropdown'
                    aria-haspopup='true'
                    aria-expanded='false'
                    id="navbarDropdown"
                    class="nav-link dropdown-toggle"
                >{{ first_name }} {{ last_name }}</a>
                <div
                    class="dropdown-menu dropdown-menu-right"
                    aria-labelledby="navbarDropdown"
                >
                    <h6 class="dropdown-header">Hello, {{ first_name }}.</h6>
                    <a href="/dash/profile" class="dropdown-item" @click="navigate('dash.profile')" onclick="return false;">My Profile</a>
                    <a href="/dash/c/listing/reflect/Token" v-if="can.api_tokens" @click="cobalt('reflect/Token', 'list')" class="dropdown-item" onclick="return false;">API Tokens</a>
                    <a href="/dash/c/listing/system/Announcement" v-if="can.messages" @click="cobalt('system/Announcement', 'list')" class="dropdown-item" onclick="return false;">System Announcements</a>
                    <div class="dropdown-divider"></div>
                    <a href="/auth/logout" class="dropdown-item">Sign-Out of {{ app_name }}</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
`

export default class NavBarComponent extends Component {
    static get selector() { return 'coreid-navbar' }
    static get template() { return template }
    static get props() { return [] }

    constructor() {
        super()

        this.can = {}
        this.toggle_event = event_bus.event('sidebar.toggle')
        this.first_name = session.get('user.first_name')
        this.last_name = session.get('user.last_name')
        this.app_name = session.get('app.name')
    }

    async vue_on_create() {
        this.can.api_tokens = await session.check_permissions('v1:reflect:tokens:list')
        this.can.messages = await session.check_permissions('v1:message:banners:create')
        this.$forceUpdate()
    }

    toggle_sidebar() {
        this.toggle_event.fire()
    }

    navigate(page) {
        action_service.perform({
            action: 'navigate',
            page,
        })
    }

    cobalt(resource, action, id = undefined) {
        action_service.perform({
            type: 'resource',
            resource,
            action,
            id,
        })
    }
}