<template>
  <q-layout view="hHh lpr lFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn
          v-if="!leftDrawerOpen"
          dense
          flat
          round
          icon="menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
            <q-avatar rounded>
              <img src="flaschengeist-logo-white.svg" />
            </q-avatar>
            <span class="gt-xs"> Flaschengeist </span>
          </router-link>
        </q-toolbar-title>

        <!-- Hier kommen die Shortlinks hin -->
        <shortcut-link
          v-for="(shortcut, index) in shortcuts"
          :key="'shortcut' + index"
          :shortcut="shortcut"
        />
        <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      side="left"
      bordered
      :mini="leftDrawerMini"
      @click.capture="leftDrawerClicker"
    >
      <!-- Plugins -->
      <q-list>
        <essential-link
          v-for="(entry, index) in mainLinks"
          :key="'plugin' + index"
          :entry="entry"
        />
        <q-separator />
        <!-- Plugin functions -->

        <essential-link
          v-for="(entry, index) in subLinks"
          :key="'childPlugin' + index"
          :entry="entry"
        />
      </q-list>

      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
        <q-btn
          size="sm"
          dense
          round
          unelevated
          color="secondary"
          icon="chevron_left"
          @click="leftDrawerMini = true"
        />
      </div>

      <q-separator />

      <essential-link
        v-for="(entry, index) in essentials"
        :key="'essential' + index"
        :entry="entry"
      />
    </q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
import { Screen } from 'quasar';
import { defineComponent, ref, inject, computed } from 'vue';
import { useMainStore } from 'src/store';
import { FG_Plugin } from 'src/plugins';
import { useRouter } from 'vue-router';

const essentials: FG_Plugin.MenuLink[] = [
  {
    title: 'Über Flaschengeist',
    link: 'about',
    icon: 'mdi-information',
  },
];

export default defineComponent({
  name: 'MainLayout',
  components: { EssentialLink, ShortcutLink },
  setup() {
    const router = useRouter();
    const mainStore = useMainStore();
    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
    const leftDrawer = ref(false);
    const shortcuts = flaschengeist?.shortcuts;
    const mainLinks = flaschengeist?.menuLinks;

    const leftDrawerOpen = computed({
      get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
      set: (val: boolean) => (leftDrawer.value = val),
    });
    const leftDrawerMini = ref(false);

    function leftDrawerClicker() {
      if (leftDrawerMini.value) {
        leftDrawerMini.value = false;
      }
    }

    const subLinks = computed(() => {
      const matched = router.currentRoute.value.matched[1];
      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
    });

    function logout() {
      void router.push({ name: 'login', params: { logout: 'logout' } });
      void mainStore.logout();
    }

    return {
      essentials,
      leftDrawerOpen,
      leftDrawerMini,
      leftDrawerClicker,
      logout,
      mainLinks,
      shortcuts,
      subLinks,
    };
  },
});
</script>
