import { Component } from '../../lib/vues6/vues6.js'
import { event_bus } from '../service/EventBus.service.js'
import { session } from '../service/Session.service.js'
import { message_service } from '../service/Message.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">My Profile</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.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')
    }

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