<script setup>
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import logo from "@/assets/branding/truckwash-banner-white-compressed.png";
import { showAuthSignOutForm } from "@/components/forms/auth/authSignOutForm.vue";
import { useRouter } from "vue-router";
import RoundedUserButton from "@/components/displays/userbuttons/RoundedUserButton.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const router = useRouter();

const doesRouteStartWith = (route) => {
  return router.currentRoute.value.path.startsWith(route);
}

</script>

<template>
  <div class="columns my-1 is-mobile is-multiline">
    <div class="column is-half-desktop is-2-touch is-hidden-mobile is-align-content-center">
      <!-- Logo -->
      <img :src="logo"
           class="image"
           alt="Company brand banner"
           width="112"
           height="28">
    </div>
    <!-- User navigation -->
    <div class="column is-half-desktop is-11-mobile is-align-items-center">
      <div class="buttons is-float-right">
        <RoundedUserButton icon="fa-cogs" @click="router.push('/superuser')" :disabled="doesRouteStartWith('/superuser')" v-if="SessionUser.canAccessSuperUser()">
          System
        </RoundedUserButton>
        <RoundedUserButton icon="fa-user-tie" @click="router.push('/admin')" :disabled="doesRouteStartWith('/admin')" v-if="SessionUser.canAccessAdmin()">
          Medarbejder
        </RoundedUserButton>
        <RoundedUserButton icon="fa-user" @click="router.push('/user')" :disabled="doesRouteStartWith('/user')" v-if="SessionUser.canAccessUser()">
          Kunde
        </RoundedUserButton>
        <RoundedUserButton icon="fa-sign-out-alt" @click="showAuthSignOutForm">
          Log ud
        </RoundedUserButton>
        <!-- If the user has a superuserToken stored, show the go back button -->
        <RoundedUserButton icon="fa-arrow-left" @click="SessionUser.superUser.intimidate.goBack()" v-if="SessionUser.superUser.intimidate.isIntimidated()">
          Tilbage
        </RoundedUserButton>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>