<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-img
          :src="localLogo"
          alt="Logo"
          style="width: 40px; height: 40px; background-color: var(--q-primary)"
          class="q-mr-sm"
        />
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

        <q-toolbar-title class="text-primary-text"> {{ $t(appName) }} </q-toolbar-title>

        <div>Version {{ version }}</div>
        <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
        <LoginMenu />
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
      <q-list>
        <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
          <q-item-section>{{ $t('login') }}</q-item-section>
        </q-item>
        <q-item
          v-if="autorized || user.isPermittedTo('members', 'read')"
          to="/members"
          exact
          clickable
          v-ripple
          @click="closeDrawer"
        >
          <q-item-section> {{ $t('members') }}</q-item-section>
        </q-item>
        <q-item
          v-if="autorized || user.isPermittedTo('events', 'read')"
          to="/events"
          exact
          clickable
          v-ripple
          @click="closeDrawer"
        >
          <q-item-section>{{ $t('events') }}</q-item-section>
        </q-item>
        <q-item
          v-if="autorized || user.isPermittedTo('responsible', 'read')"
          to="/responsible"
          exact
          clickable
          v-ripple
          @click="closeDrawer"
        >
          <q-item-section>{{ $t('responsible') }}</q-item-section>
        </q-item>
        <q-item
          v-if="autorized || user.isPermittedTo('group', 'read')"
          to="/group"
          exact
          clickable
          v-ripple
          @click="closeDrawer"
        >
          <q-item-section>{{ $t('groups') }}</q-item-section>
        </q-item>
        <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
          <q-item-section>{{ $t('login') }}</q-item-section>
        </q-item>
        <!-- <q-item
          v-if="autorized || user.isPermittedTo('members', 'read')"
          to="/report"
          exact
          clickable
          v-ripple
          @click="closeDrawer"
        >
          <q-item-section> {{ $t('report') }}</q-item-section>
        </q-item> -->
        <q-item v-if="autorized" to="/stats" exact clickable v-ripple @click="closeDrawer">
          <q-item-section> {{ $t('stats') }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { version } from '../../package.json';
import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
import { useUserStore } from 'src/vueLib/login/userStore';
import { logo, appName } from 'src/vueLib/models/settings';
import { useQuasar } from 'quasar';

const localLogo = ref(logo);

const leftDrawerOpen = ref(false);
const user = useUserStore();
const autorized = computed(
  () => user.isAuthorizedAs(['admin']) || user.isPermittedTo('settings', 'read'),
);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

function closeDrawer() {
  leftDrawerOpen.value = false;
}

function refresh() {
  window.location.reload();
}

// Change width based on screen size
const drawerWidth = computed(() => {
  const $q = useQuasar();
  return $q.screen.lt.sm ? 220 : 300; // phone: 220px, desktop: 300px
});
</script>
