<script setup>
import { useRouter} from "vue-router";
import { ref } from 'vue';
import { departments, getDepartmentName, isLoading as departmentTabsIsLoading, getDepartments} from "@/components/pagination/departmentTabs.vue";

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

/** Define the tabs */
// In this case, we have two tabs: Department Dashboard and Kassesystem ( POS )
// The "Kassesystem ( POS )" will be considered the current page and will be highlighted when
const tabs = [
  { name: 'Department Dashboard', path: '/admin/' + departmentId.value },
  { name: 'Kassesystem ( POS )', path: '/admin/' + departmentId.value + '/modules/pos' },
  { name: 'Bookinger', path: '/admin/' + departmentId.value + '/modules/bookings' },
  { name: 'Notifikationer', path: '/admin/' + departmentId.value + '/modules/notifications' },
];

// Get the current path
const currentPath = ref(router.currentRoute.value.path);

// Get the index of the active tab
const activeTab = tabs.findIndex(tab => tab.path === currentPath.value);

// Change the tab
const changeTab = (index) => {
  router.push(tabs[index].path);
};

const changeDepartment = (id) => {
  router.push('/admin/' + id);
  // Update the params
  router.currentRoute.value.params.departmentId = id;
  // Update the departmentId
  departmentId.value = id;
};

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

<template>
  <div class="columns">
    <div class="column">
      <div class="tabs is-left">
        <ul>
          <li v-for="(tab, index) in departments" :key="index" :class="{'is-active': departmentId === tab.id}" @click="changeDepartment(tab.id)" v-if="!departmentTabsIsLoading">
            <a>{{ tab.name }}</a>
          </li>
          <!-- Skeleton loader -->
          <li v-else v-for="n in 3" :key="n">
            <a><span class="is-skeleton">Loading...</span></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="column">
      <div class="tabs is-right">
        <ul>
          <li v-for="(tab, index) in tabs" :key="index" :class="{'is-active': activeTab === index}" @click="changeTab(index)" v-if="departmentId">
            <a>{{ tab.name }}</a>
          </li>
          <!-- Skeleton loader -->
          <li v-else v-for="n in 1" :key="n">
            <a>&nbsp</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>