<template>
  <div class="position-sticky pt-3 page">
    <h6>
      <span
        class="
          sidebar-heading
          d-flex
          justify-content-between
          align-items-center
          px-3
          mt-4
          mb-1
          text-muted
        "
      >
        <template v-if="isAuthenticated">
          Angemeldet als {{ username }}
        </template>
        <template v-else> Nicht eingeloggt </template>
      </span>
    </h6>
    <ul v-if="isAuthenticated" class="nav flex-column">
      <template v-for="(e, idx) in items" :key="idx">
        <h6
          v-if="e.type === 'heading'"
          class="
            sidebar-heading
            d-flex
            justify-content-between
            align-items-center
            px-3
            mt-4
            mb-1
            text-muted
          "
        >
          {{ e.text }}
        </h6>

        <li v-if="e.type === 'link' && 'href' in e" class="nav-item">
          <a class="nav-link" aria-current="page" :href="e.href">
            <i v-if="e.icon" class="bi feather" :class="'bi-' + e.icon"></i>
            <i v-else class="bi bi-file-earmark feather"></i>
            {{ e.text }}
          </a>
        </li>
        <li v-if="e.type === 'link' && 'name' in e" class="nav-item">
          <router-link
            class="nav-link"
            :to="{ name: e.name }"
            active-class="active"
          >
            <i class="bi bi-file-earmark feather"></i>
            {{ e.text }}
          </router-link>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
/**
 * Sidebar for DashboardLayout. Uses vue-keycloak to determine if the user is authenticated.
 * Possible navigation entries are specified via the `items`-property.
 *
 * Usage: specify an array of navigation items.
 *
 * Possible items:
 * Headers: {text: "something", type: "heading"}
 * href links: {text: "somthing", type: "link", href:"/somewhere", icon:"plus"}
 * router links: {text: "somthing", type: "link", name:"route-name", icon:"plus"}
 *
 * Icons are optional and are taken from bootstrap-icons. You only need to specify the
 * name, not the full class. E.g. for `<i class="bi bi-ui-checks-grid"></i>` you only need
 * to use `ui-checks-grid`.
 */
import { useKeycloak } from "@baloise/vue-keycloak";
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    noKeycloak: { type: Boolean, default: false },
  },
  setup(props) {
    if (props.noKeycloak) {
      const isAuthenticated = false;
      return { isAuthenticated };
    } else {
      const { isAuthenticated, username } = useKeycloak();
      return {
        isAuthenticated,
        username,
      };
    }
  },
};
</script>