<script setup>
import { useRouter} from "vue-router";
import { ref } from 'vue';
import { showAuthSignOutForm } from '@/components/forms/auth/authSignOutForm.vue';
import UserNavigation from "@/components/global/UserNavigation.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const router = useRouter();

const tabs = [
  { name: 'Dashboard', path: '/superuser' },
  { name: 'Statistics', path: '/superuser/statistics' },
  { name: 'Departments', path: '/superuser/departments' },
  { name: 'Medarbejdere', path: '/superuser/users' },
  { name: 'Customers', path: '/superuser/customers' },
  { name: 'Products', path: '/superuser/products' },
  { name: 'Fakturaer', path: '/superuser/invoices' },
  { name: 'Transaktionshistorik', path: '/superuser/orders' },
  { name: 'Scanners', path: '/superuser/scanners' },
  { name: 'Roles', path: '/superuser/roles' },
  { name: 'Vehicles', path: '/superuser/vehicles' },
  { name: SessionUser.objects.categories.meta.title, path: '/superuser/categories' },
  { name: 'Configuration', path: '/superuser/configuration' }
];

// 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);
};
</script>

<template>
  <div>
    <UserNavigation />
    <div class="tabs is-right">
      <ul>
        <li v-for="(tab, index) in tabs" :key="index" :class="{'is-active': activeTab === index}" @click="changeTab(index)">
          <a>{{ tab.name }}</a>
        </li>
        <!-- Sign out button -->
        <li>
          <a @click="showAuthSignOutForm">Sign out</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>

</style>