<template>
  <div class="flex min-h-full flex-col">
    <MainNavigationBar class="flex-none" />
    <RouterView v-slot="{ Component }" class="flex-auto">
      <Transition mode="out-in" name="app">
        <component :is="Component" :key="componentKey"></component>
      </Transition>
    </RouterView>
    <AppFooter class="flex-none" />
  </div>
</template>

<script setup lang="ts">
import log from "loglevel";

import AppFooter from "@/components/AppFooter.vue";
import MainNavigationBar from "@/components/header/MainNavigationBar.vue";
import { graphqlClient } from "@/graphql/client";
import eventBus from "@/utils/eventBus";
import { provideClient } from "@urql/vue";
import { onMounted, ref } from "vue";

const componentKey = ref(1);

log.debug("App created");

provideClient(graphqlClient);

onMounted(() => {
  log.debug("App mounted");

  eventBus.on("switchedCourseSession", () => {
    // Rerender the component tree, when the course session gets switched.
    // So that the current learning path completion data gets updated.
    componentKey.value++;
    log.info("Switched course session, re-evaluate component tree");
  });
});
</script>

<style lang="postcss" scoped>
.app-enter-active,
.app-leave-active {
  transition: opacity 0.3s ease;
}

.app-enter-from,
.app-leave-to {
  opacity: 0;
}
</style>
