<script setup>
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref } from 'vue';
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
import UserNotificationButton from "@/components/displays/user/UserNotificationButton.vue";
const isDisplayingDropdown = ref(false);

const redirect = (path) => {
  window.location.href = path;
};
</script>

<template>
  <div class="buttons is-flex-wrap-nowrap">
    <template v-if="SessionUser.functions.hasToken()">
      <UserNotificationButton />
      <div class="dropdown is-right" :class="{ 'is-active': isDisplayingDropdown }">
        <div class="dropdown-trigger">
          <button class="button" @click="isDisplayingDropdown = !isDisplayingDropdown">
            <span>{{SessionUser.user.display_name}}</span>
            <span class="icon is-small">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu" style="z-index: 1000;">
          <div class="dropdown-content">
            <!-- Dropdown items -->
            <RequiresPermission permission="user">
              <a href="#" class="dropdown-item" @click="redirect('/user/profile')"> <!-- Redirect to the user profile page -->
                <p class="is-size-7">Brugerprofil</p>
              </a>
            </RequiresPermission>
            <RequiresPermission permission="user">
              <a href="#" class="dropdown-item" @click="redirect('/user')"> <!-- Redirect to the user page -->
                <p class="is-size-7">Kundeside</p>
              </a>
            </RequiresPermission>
            <RequiresPermission permission="admin">
              <a href="#" class="dropdown-item" @click="redirect('/admin')"> <!-- Redirect to the admin page -->
                <p class="is-size-7">Afdelingsadministration</p>
              </a>
            </RequiresPermission>
            <RequiresPermission permission="superuser">
              <a href="#" class="dropdown-item" @click="redirect('/superuser')"> <!-- Redirect to the superuser page -->
                <p class="is-size-7">System administration</p>
              </a>
            </RequiresPermission>
            <a href="#" class="dropdown-item" @click="SessionUser.superUser.intimidate.goBack()" v-if="SessionUser.superUser.intimidate.isIntimidated()"> <!-- Redirect to the superuser page -->
              <p class="is-size-7">Tilbage til egen bruger</p>
            </a>
            <a href="#" class="dropdown-item" @click="SessionUser.functions.showConfirmLogoutDialog()"> <!-- Log out the user -->
              <p class="is-size-7 has-text-danger">Log ud</p>
            </a>
          </div>
        </div>
      </div>
    </template>
    <!-- If the user is not logged in -->
    <template v-else>
      <div class="dropdown is-right" :class="{ 'is-active': isDisplayingDropdown }">
        <div class="dropdown-trigger">
          <button class="button" @click="isDisplayingDropdown = !isDisplayingDropdown">
            <span>Gæst</span>
            <span class="icon is-small">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
          </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu" style="z-index: 1000;">
          <div class="dropdown-content">
            <!-- Dropdown items -->
              <a href="#" class="dropdown-item" @click="redirect('/login')"> <!-- Redirect to the login page -->
                <p class="is-size-7">Log ind</p>
              </a>
              <a href="#" class="dropdown-item" @click="SessionUser.functions.redirectTo.external('https://www.truckwash.dk/opret-kredit-konto/', true)"> <!-- Redirect to the register page -->
                <p class="is-size-7">Opret bruger</p>
              </a>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>

</style>