<template>
  <div v-if="user.name" class="topbar__container" :class="{ 'topbar__container__cameo': user.userInfo.isCameo }">
    <div class="topbar__username">
      {{ user.name }}
    </div>
    <div class="topbar__separator" />
    <div class="topbar__actionbar">
      <div v-if="user.isAdmin" class="topbar__actionbar__admin">
        Admin
      </div>
      <div v-if="user.isGamemaster" class="topbar__actionbar__gamemaster">
        <GameControls />
      </div>
      <div v-else class="topbar__actionbar__player">
        {{ game?.name }}
      </div>
    </div>
    <div class="topbar__separator" />
    <div class="topbar__logout-button-container">
      <Button class="topbar__logout-button" :border="false" @click="actionLogout">{{ $t('logout') }}</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { navigateTo } from '#app'
import useAuth from '@/composables/useAuth';
import useI18n from '@/composables/useI18n';
import useEngine from '@/composables/useEngine';
import { useUserinfoStore } from "@/stores/UserinfoStore"
import { useGameinfoStore } from "@/stores/GameinfoStore"

const { $t } = useI18n({
  'logout': { en: 'Logout', de: 'abmelden' },
})

const user = useUserinfoStore()
const game = useGameinfoStore()

const { logout } = useAuth()
const { logoutCameo } = useEngine()
const actionLogout = async () => {
  if (user.userInfo.isCameo) {
    await logoutCameo()
    navigateTo('/admin')
  } else {
    await logout()
    navigateTo('/')
  }
}
</script>

<style lang="scss">
@import '~/assets/css/components';

.topbar {
  &__container {
    display: flex;
    width: 100%;
    height: 64px;
    align-items: center;
    background-color: $topbar-background-color;
    font-size: 16px;
    font-family: $font-primary;
    font-weight: bold;
    cursor: default;

    &__cameo {
      background-color: $topbar-cameo-background-color;
    }
  }

  &__username,
  &__logout-button-container {
    width: 128px;
    padding: 0 16px;
    text-align: center;
    color: $text-primary-color;
  }
  
  &__actionbar {
    flex-grow: 1;
    
    &__player, 
    &__admin {
      color: $text-primary-color;
      font-size: 24px;
      text-align: center;
    }
  }

  &__separator {
    width: 1px;
    height: calc(64px - 2 * 16px);
    margin: 16px 0;
    background-color: $topbar-separator-color;
  }

  &__logout-button {
    color: $text-primary-color;
    font-size: 16px;
    font-family: $font-primary;

    &:hover {
      color: $text-primary-hover-color;
    }
  }
}
</style>