<script
    lang="ts"
    setup
>
    import { RouterView } from 'vue-router';
    import HeaderBar from 'src/layouts/components/main-layout-header-bar.vue';
    import FooterBar from 'src/layouts/components/main-layout-footer-bar.vue';
    import LeftDrawer from 'src/layouts/components/main-layout-left-drawer.vue';
    import { useUiStore } from 'src/stores/ui-store';
    import { onMounted, watch, ref } from 'vue';
    import { useI18n } from 'vue-i18n';

    const { t } = useI18n();

    const ui_store = useUiStore();
    const user_preferences = ref(ui_store.user_preferences);
    
    onMounted(async () => {
        if (ui_store.user_preferences.id === -1) {
            await ui_store.getUserPreferences();
        }
    });

    watch(user_preferences, async () => {
        if (ui_store.user_preferences.id !== -1) {
            await ui_store.updateUserPreferences(t);
            return
        }
        await ui_store.getUserPreferences();
    }, {deep: true});
</script>

<template>
    <q-layout view="hHh lpR fFf">
        <HeaderBar />
        <LeftDrawer />
        <q-page-container>
            <router-view class="q-pa-sm bg-secondary" />
        </q-page-container>
        <FooterBar />
    </q-layout>
</template>