<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';
    import { useAuthStore } from 'src/stores/auth-store';


    const ui_store = useUiStore();
    const auth_store = useAuthStore();
    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 v-if="auth_store.user?.user_module_access.includes('chatbot')"/>

        <q-page-container>
            <router-view />
        </q-page-container>

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