<script lang="ts" setup>
import { Dialog } from 'quasar';
import { useNavLinks } from '~/utils/navlinks';
import { useAuthStore } from '~/stores/auth';
import { APP_VERSION } from '~/utils/version';

defineProps(['drawer']);
defineEmits(['drawer-toggle']);

const { enabledLinks } = useNavLinks();
const authStore = useAuthStore();

function showAbout() {
  Dialog.create({
    title: 'OYS Borrow a Boat',
    message: `Version ${APP_VERSION}<br>Manage a Borrow a Boat program for a Yacht Club.<br><br>© Oakville Yacht Squadron`,
    html: true,
  });
}

async function logout() {
  await authStore.logout();
  await navigateTo('/login');
}
</script>

<template>
  <q-drawer
    :model-value="drawer"
    show-if-above
    :width="200"
    :breakpoint="1024"
    @update:model-value="$emit('drawer-toggle')">
    <q-scroll-area class="fit">
      <q-list padding class="menu-list">
        <template v-for="link in enabledLinks" :key="link.name">
          <q-item clickable v-ripple :to="link.to">
            <q-item-section avatar>
              <q-icon :name="link.icon" />
            </q-item-section>
            <q-item-section>
              <span :class="link.color ? `text-${link.color}` : ''">
                {{ link.name }}
              </span>
            </q-item-section>
          </q-item>
          <q-list v-if="link.sublinks">
            <div v-for="sublink in link.sublinks" :key="sublink.name">
              <q-item clickable v-ripple :to="sublink.to" class="q-ml-md">
                <q-item-section avatar>
                  <q-icon :name="sublink.icon" />
                </q-item-section>
                <q-item-section>
                  <span :class="sublink.color ? `text-${sublink.color}` : ''">
                    {{ sublink.name }}
                  </span>
                </q-item-section>
              </q-item>
            </div>
          </q-list>
        </template>
        <q-item clickable v-ripple @click="showAbout()">
          <q-item-section avatar><q-icon name="info" /></q-item-section>
          <q-item-section>About</q-item-section>
        </q-item>
        <q-item clickable v-ripple @click="logout()">
          <q-item-section avatar><q-icon name="logout" /></q-item-section>
          <q-item-section>Logout</q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<style lang="sass" scoped>
.menu-list .q-item
  border-radius: 0 32px 32px 0
</style>
