<template>
  <div class="q-gutter-md">
    <q-btn dense flat round icon="person" :color="currentUser ? 'green' : ''">
      <q-menu ref="refLoginMenu">
        <q-list style="min-width: 120px">
          <q-item v-if="user.user" class="text-primary">{{ currentUser?.username }}</q-item>
          <q-item v-if="showLogin" clickable v-close-popup @click="openLogin">
            <q-item-section class="text-primary">{{ loginText }}</q-item-section>
          </q-item>
          <q-item>
            <q-btn flat :icon="darkMode" @click="toggleDarkMode"
              ><q-tooltip>{{ $t(darkMode) }}</q-tooltip></q-btn
            >
          </q-item>
          <q-item>
            <q-select
              :label="$t('language')"
              borderless
              color="primary"
              dense
              v-model="langSelected"
              :options="langSelection"
              ><q-tooltip>{{ $t('language') }}</q-tooltip></q-select
            >
          </q-item>
          <q-item
            v-if="
              (autorized || user.isPermittedTo('settings', 'read')) && route.path !== '/settings'
            "
          >
            <q-btn flat color="secondary" icon="settings" to="/settings"></q-btn>
          </q-item>
          <q-item
            v-if="
              (autorized || user.isPermittedTo('userSettings', 'read')) &&
              route.path !== '/userSettings'
            "
          >
            <q-btn flat color="secondary" icon="group" to="/userSettings"></q-btn>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
  <LoginDialog ref="refLoginDialog"></LoginDialog>
</template>

<script setup lang="ts">
import LoginDialog from './LoginDialog.vue';
import { computed, ref, watch } from 'vue';
import { useNotify } from '../general/useNotify';
import { lang, i18n } from 'src/boot/lang';
import { useUserStore } from './userStore';
import { useRoute } from 'vue-router';
import { Dark } from 'quasar';
import { useLogin } from './useLogin';
import { setLocalDarkMode, setLocalLanguage } from 'src/localstorage/localStorage';

const userLogin = useLogin();
const route = useRoute();
const refLoginDialog = ref();
const user = useUserStore();
const { NotifyResponse } = useNotify();
const currentUser = computed(() => user.user);
const darkMode = computed(() => {
  if (Dark.mode) {
    return 'light_mode';
  }
  return 'dark_mode';
});
const showLogin = computed(
  () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
);

const autorized = computed(() => !!user.isAuthorizedAs(['admin']));

// switch between logged in or logged out text
const loginText = computed(() => {
  return currentUser.value ? i18n.global.t('logout') : i18n.global.t('login');
});

//switch between dark and light mode and save it in localStorage
function toggleDarkMode() {
  Dark.toggle();
  setLocalDarkMode();
}

// opens login page if no user is logged in otherwise it serves as logout
function openLogin() {
  if (currentUser.value) {
    userLogin.logout().catch((err) => NotifyResponse(err, 'error'));
    return;
  }
  refLoginDialog.value?.open();
}

const langSelected = ref(i18n.global.locale);
const langSelection = ref(lang);

// Watch for changes and update i18n locale
watch(langSelected, (newLang) => {
  i18n.global.locale = newLang;

  setLocalLanguage(newLang);
});
</script>
