<script setup>
import { onMounted, onUnmounted, provide } from 'vue';
import { RouterView } from 'vue-router';
import { useRealtime, REALTIME_KEY } from './composables/useRealtime';
import { usePresence } from './composables/usePresence';
import CommNav from './components/CommNav.vue';

const realtime = useRealtime();
provide(REALTIME_KEY, realtime);

const presence = usePresence();

onMounted(() => {
    presence.start();
    if (realtime.isRealtimeEnabled()) {
        realtime.bindConnection();
        realtime.subscribeUserChannel();
    }
});

onUnmounted(() => {
    presence.stop();
    realtime.cleanup();
});
</script>

<template>
    <CommNav />
    <div class="comm-router-view">
        <RouterView />
    </div>
</template>

<style scoped>
.comm-router-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
</style>
