<template>
  <div class="q-mb-md">
    <DefaultHeaderPage />

    <q-tabs
      v-model="currentTab"
      align="left"
      active-color="primary"
      class="settings-tabs q-mt-lg"
      indicator-color="transparent"
      inline-label
      no-caps
    >
      <q-tab
        v-for="tabItem in tabsItems"
        :key="tabItem.name"
        class="settings-tab"
        :class="{ hidden: tabItem.hide }"
        :disable="tabItem.disable"
        :label="tabItem.label"
        :name="tabItem.name"
      />
    </q-tabs>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { permissionStore } from "src/stores/permission";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const route  = useRoute();
const router = useRouter();

const { t } = useI18n();

const { getAccess } = permissionStore();

const tabRoutes = Object.freeze({
  users: "SettingsUsersPage", user_types: "SettingsUserTypesPage",
});

const tabsItems = computed(() => [
  { name: "users",      label: t("settings.tabs.users"),      hide: !getAccess("config.user", "view") },
  { name: "user_types", label: t("settings.tabs.user_types"), hide: !getAccess("config.permission", "view") },
]);

const resolveTabByRoute = () => {
  if (route.path.startsWith("/settings/user-types")) {
    return "user_types";
  }

  return "users";
};

const currentTab = computed({
  get() {
    return resolveTabByRoute();
  },
  set(value) {
    const routeName = tabRoutes[value];

    if (routeName) {
      router.push({ name: routeName });
    }
  },
});
</script>

<style scoped lang="scss">
.settings-tabs {
  display:       inline-flex;
  border-radius: 14px;
  background:    rgba(14, 52, 91, 0.05);
  padding:       4px;
}

.settings-tab {
  min-height:    36px;
  padding:       0 14px;
  border-radius: 10px;
}

.settings-tab.q-tab--active {
  background: white;
  color:      var(--q-primary);
  box-shadow: 0 8px 18px rgba(14, 52, 91, 0.14);
}
</style>
