<script setup>
import { useRouter} from "vue-router";
import { ref, watch } from 'vue';
import { getDepartmentName, getDepartmentDescription, isLoading, getDepartments, departments, departmentExists } from "@/components/pagination/departmentTabs.vue";
import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/DepartmentDashboardHero.vue";
import DepartmentModulesDisplay from "@/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import DepartmentDashboardMyDepartmentsOverview
  from "@/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
import DepartmentDashboardOverview
  from "@/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue";


const router = useRouter();
const departmentId = ref(parseInt(router.currentRoute.value.params.departmentId));

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}

// Watch the departmentId
watch(() => router.currentRoute.value.params.departmentId, (newVal) => {
  departmentId.value = parseInt(newVal);
});
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardOverview v-if="departmentId && !isLoading && departmentExists(departmentId)"/>
    <DepartmentDashboardMyDepartmentsOverview v-else/>
  </RestrictedPageWrapper>

</template>

<style scoped>

</style>