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

const template = `
<div class="bg-light border-right coreid-sidebar-wrapper" id="sidebar-wrapper" v-bind:class="{ collapsed: isCollapsed }">
    <div class="sidebar-heading">{{ app_name }}</div>
    <div class="list-group list-group-flush">
        <a
            href="#"
            @click="perform(action)"
            class="list-group-item list-group-item-action bg-light"
            v-for="action in actions"
        >{{ action.text }}</a>
    </div>
</div>
`

// TODO figure out why this doesn't show up in mobile layouts

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

    actions = [
        {
            text: 'Profile',
            action: 'redirect',
            next: '/dash/profile',
        },
        {
            text: 'Users',
            action: 'redirect',
            next: '/dash/users',
        },
        {
            text: 'Groups',
            action: 'redirect',
            next: '/dash/groups',
        },
        {
            text: 'LDAP Clients',
            action: 'redirect',
            next: '/dash/ldap/clients',
        },
        {
            text: 'SAML Service Providers',
            action: 'redirect',
            next: '/dash/saml/service-providers',
        },
        {
            text: 'Settings',
            action: 'redirect',
            next: '/dash/settings',
        },
    ]

    constructor() {
        super()
        event_bus.event('sidebar.toggle').subscribe(() => {
            this.toggle()
        })
    }

    isCollapsed = false

    toggle() {
        this.isCollapsed = !this.isCollapsed
    }

    perform(action) {
        return action_service.perform({delay: 0, ...action})
    }
}