<style lang="scss"></style>

<template>
  <div>
    <b-navbar>
      <template #brand>
        <b-navbar-item tag="div" @click="show = true" class="is-clickable">
          <b-icon icon="menu-open" class="mr-2"/>

          <div class="image is-24x24">
            <v-gravatar class="is-rounded" :email="user.email" :size="24" default-img="mm"/>
          </div>
        </b-navbar-item>
      </template>

      <template #start>
        <template v-for="(item, index) in menusAuthorized">
          <b-navbar-dropdown :label="$t('menu.'+item.label+'.name')" :key="index" v-if="item.menus">
            <template v-for="(item2, index2) in item.menus">
                
                <b-navbar-item tag="router-link"
                      :to="item2.to"
                      :key="index2"
                      :active="item2.to == currentPath">
                <b-icon :icon="item2.icon" size="is-small"/> <span>{{ $t('menu.'+item2.label+'.name') }}</span>
              </b-navbar-item>

            </template>
          </b-navbar-dropdown>

          <b-navbar-item tag="router-link" v-else
                        :to="item.to"
                        :key="index"
                        :active="item.to == currentPath">
            <b-icon :icon="item.icon" size="is-small"/> <span>{{ $t('menu.'+item.label+'.name') }}</span>
          </b-navbar-item>
        </template>
      </template>
    </b-navbar>

    <b-sidebar 
          v-model="show" 
          :fullheight="true">
      
      <b-dropdown trap-focus>
          <template #trigger>
              <a class="button is-light">
                <b-icon icon="earth" size="is-small" />
                <span> {{ language }} </span>
                <b-icon icon="menu-down" />
              </a>
          </template>

          <b-dropdown-item aria-role="listitem" @click="changeLocale('pt')">Português</b-dropdown-item>
          <b-dropdown-item aria-role="listitem" @click="changeLocale('es')">Español</b-dropdown-item>
          <b-dropdown-item aria-role="listitem" @click="changeLocale('en_US')">English</b-dropdown-item>
      </b-dropdown>

      <h1 class="title has-text-centered is-5 mb-4 p-2"> Lean ISP </h1>
      
      <article class="media p-3 has-background-primary has-text-white">
        <figure class="media-left">
          <p class="image is-64x64">
            <v-gravatar class="is-rounded" :email="user.email" :size="64" default-img="mm"/>
          </p>
        </figure>
        <div class="media-content">
          <div class="content">
            <div>{{ user.name }}</div>
            <small>{{ user.email }}</small>
          </div>
        </div>
      </article>
      
      <b-menu class="mt-3 nav-menu-app">
        <b-menu-list>
          <b-menu-item v-for="(app, index) in appsAuthorized" 
                      :key="index" 
                      @click="select(app)"
                      :icon="app.icon" 
                      :label="$t('app.'+app.name+'.name')" 
                      :class="(app.url === currentApp.path)?'actived-menu':''"/>
        </b-menu-list>
      </b-menu>

      <div class="p-3 has-text-centered">
        <b-button icon-right="location-exit" type="is-light" @click="logout">{{$t('menu.logout')}}</b-button>
      </div>

    </b-sidebar>

  </div>
</template>

<script>
import apps from "../../apps.json"

export default {
  name: 'MenuBar',
  data() {
    return {
      show: false
    }
  },
  computed: {
    menusAuthorized() {
      if (!this.$menu) return [];
      return this.$menu.filter(m => this.roles.indexOf(m.role) !== -1 || !m.role);
    },
    currentPath() {
      return (this.$route)? this.$route.path : '';
    },
    currentApp() {
      return this.$APP || {};
    },
    apps() {
      return apps;
    },
    appsAuthorized() {
      if (!this.apps) return [];
      return this.apps.filter(m => this.roles.indexOf(m.role) !== -1 || !m.role);
    },
    language() {
      return localStorage.language || navigator.language.replace('-','_')
    }
  },
  methods: {
    select(app) {
      let url = window.location.origin + app.url + "/";
      window.location.href = url;
    },
    changeLocale(locale) {
      localStorage.language = locale
      window.location.reload()
    },
    logout() {
      this.$keycloak.logout({ redirectUri: window.location.href });
    }
  }
}
</script>