<template>
  <component :is="currentLayout" />
  <ConfirmModal />
  <VueQueryDevtools />
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useModalStore } from '@/store/modal'
import AdminLayout from '@/layouts/AdminLayout.vue'
import PublicLayout from '@/layouts/PublicLayout.vue'
import StudentLayout from '@/layouts/StudentLayout.vue'
import ConfirmModal from '@/components/ConfirmModal.vue'
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'

const route = useRoute()

const layouts = {
  public: PublicLayout,
  admin: AdminLayout,
  student: StudentLayout,
}

const currentLayout = computed(() => layouts[route.meta?.layout] || PublicLayout)

const { modals } = storeToRefs(useModalStore())
watch(
  () => modals.value.length,
  (count) => {
    document.body.style.overflow = count > 0 ? 'hidden' : ''
  }
)
</script>
