<script setup>
import { useQuasar } from 'quasar';
import Navbar from 'src/components/NavBar.vue';
import { useRouter } from 'vue-router';
import routes from 'src/router/modules';
import { onMounted } from 'vue';

const quasar = useQuasar();

onMounted(() => {
    let isNotified = false;

    const router = useRouter();
    const keyBindingMap = routes
        .filter((route) => route.meta.keyBinding)
        .reduce((map, route) => {
            map['Key' + route.meta.keyBinding.toUpperCase()] = route.path;
            return map;
        }, {});

    const handleKeyDown = (event) => {
        const { ctrlKey, altKey, code } = event;

        if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) {
            event.preventDefault();
            router.push(keyBindingMap[code]);
            isNotified = true;
        }
    };

    const handleKeyUp = (event) => {
        const { ctrlKey, altKey } = event;

        if (!ctrlKey || !altKey) {
            isNotified = false;
        }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
});
</script>

<template>
    <QLayout view="hHh LpR fFf" v-shortcut>
        <Navbar />
        <RouterView></RouterView>
        <QFooter v-if="quasar.platform.is.mobile"></QFooter>
    </QLayout>
</template>
