<script setup lang="ts">
import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
import Radar from "@/Components/FlightsGoneBy/Radar.vue";
import StatusNotifications from "@/Components/FlightsGoneBy/StatusNotifications.vue";
import ToastNotifications from "@/Components/FlightsGoneBy/ToastNotifications.vue";
import {router, usePage} from "@inertiajs/vue3";
import { ref } from "vue";
import NotificationListener from "@/Components/FlightsGoneBy/NotificationListener.vue";
import {SharedProps} from "@/Types/types";
const transitionKey = ref(0);

const page = usePage<SharedProps>().props

router.on('success', () => {
    transitionKey.value++;
});
</script>

<template>
    <Radar>
        <div class="layoutContainer">
            <MainHeader :key="`header-${transitionKey}`" />
            <Transition name="fade" mode="out-in">
                <main id="pageContainer" :key="`main-${transitionKey}`">
                    <slot />
                </main>
            </Transition>
            <MainFooter :key="`footer-${transitionKey}`" />
        </div>
        <NotificationListener v-if="page.auth.user?.id" :user-id="page.auth.user?.id" />
        <StatusNotifications />
        <ToastNotifications />
    </Radar>
</template>

<style scoped>
.layoutContainer {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    color: var(--text);
    overflow-y: auto;
}

header,
footer {
    flex: 0 0 5dvh;
    min-height: 3rem;
}

main {
    flex: 1 1 auto;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fade-enter-from,
.fade-leave-to { opacity: 0; }
.fade-enter-active,
.fade-leave-active { transition: opacity 0.2s ease; }
</style>
