<script
    lang="ts"
    setup
>
    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 ChatbotDrawer from 'src/modules/chatbot/components/chatbot-drawer.vue';
    
    import { onMounted, watch, ref } from 'vue';
    import { RouterView } from 'vue-router';
    import { useUiStore } from 'src/stores/ui-store';

    
    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();
            return
        }
        await ui_store.getUserPreferences();
    }, {deep: true});
</script>

<template>
    <q-layout view="hHh lpR fFf">
        <HeaderBar />

        <LeftDrawer />

        <ChatbotDrawer />

        <q-page-container>
            <router-view />
        </q-page-container>
        
        <FooterBar v-if="!$q.platform.is.mobile" />
    </q-layout>
</template>
