<script setup lang="ts">
import {RouterView} from 'vue-router'
import NavBar from '@components/Navbar.vue'
import {onMounted, onUnmounted, ref, watch} from 'vue'
import {updateIsMobile, routerTransitioning} from "@/globals.ts";

let resizeObserver: ResizeObserver | null = null;

const isFooterFixed = ref(document.documentElement.scrollHeight <= window.innerHeight);

watch(() => document.documentElement.scrollHeight, () => {
    console.debug('Document height changed, updating footer position');
    updateFooterPosition();
});

const updateFooterPosition = () => {
    isFooterFixed.value = document.documentElement.scrollHeight <= window.innerHeight;
};

onMounted(() => {
    resizeObserver = new ResizeObserver(() => updateFooterPosition());
    resizeObserver.observe(document.documentElement)
    window.addEventListener("resize", updateIsMobile)
});
onUnmounted(() => {
    window.removeEventListener("resize", updateIsMobile)
    if (resizeObserver) resizeObserver.disconnect();
});
</script>

<template>
    <NavBar/>
    <div class="router-view">
        <RouterView v-slot="{Component}">
            <template v-if="Component">
                <transition name="fade-tabs" mode="out-in" appear @before-enter="routerTransitioning=true"
                            @after-enter="routerTransitioning = false">
                    <component :is="Component"/>
                </transition>
            </template>
            <template v-else>
                Loading...
            </template>
        </RouterView>
    </div>
    <div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
        <div class="footer-content">
            <p style="text-align: center; margin-top: 1rem">&copy;2025 <a href="https://github.com/L10nhunter">L10nhunter</a>.
                All rights reserved.</p>
        </div>
    </div>
</template>

<style scoped>
.footer-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
</style>
