<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { IS_DEV } from "@/config.js";
import SessionUser from "@/components/session/token/SessionUser.vue";
import {
  getAdminDepartmentIdFromRoute,
  getAdminDepartmentRoute,
  getLimitedBackofficeDepartmentIdFromRoute,
  getLimitedBackofficeDepartmentRoute,
} from "@/components/viewport/page/headers/headerShortcuts.js";

const route = useRoute();
const { t } = useI18n({ useScope: "global" });

const adminDepartmentId = computed(() => getAdminDepartmentIdFromRoute(route));
const backofficeDepartmentId = computed(() => getLimitedBackofficeDepartmentIdFromRoute(route));

const canAccessDepartment = (departmentId) =>
  Number.isInteger(departmentId) && departmentId > 0 && SessionUser.canAccessDepartment(departmentId);

const canShowSuperuserBackoffice = computed(
  () => SessionUser.canAccessSuperUser() && !route.path.includes("/superuser")
);

const canShowLimitedBackoffice = computed(() => {
  const departmentId = adminDepartmentId.value;

  return (
    canAccessDepartment(departmentId) &&
    SessionUser.hasPermission("limited_backoffice_access") &&
    !SessionUser.canAccessSuperUser()
  );
});

const limitedBackofficeTarget = computed(() => getLimitedBackofficeDepartmentRoute(adminDepartmentId.value));

const adminShortcutTarget = computed(() =>
  backofficeDepartmentId.value ? getAdminDepartmentRoute(backofficeDepartmentId.value) : "/admin"
);

const canShowAdminShortcut = computed(() => {
  if (!SessionUser.canAccessAdmin() || route.path.includes("/admin")) {
    return false;
  }

  const departmentId = backofficeDepartmentId.value;
  return departmentId === null || canAccessDepartment(departmentId);
});
</script>

<template>
  <router-link
    v-if="canShowSuperuserBackoffice"
    class="button is-white"
    to="/superuser"
    data-testid="superuser-backoffice-header-button"
  >
    <span class="icon">
      <i class="fas fa-tools" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
    </span>
    <span>{{ t("header.backoffice") }}</span>
  </router-link>

  <router-link
    v-if="canShowLimitedBackoffice"
    class="button is-white"
    :to="limitedBackofficeTarget"
    data-testid="limited-backoffice-header-button"
  >
    <span class="icon">
      <i class="fas fa-tools" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
    </span>
    <span>{{ t("templates.limited_backoffice.title") }}</span>
  </router-link>

  <router-link
    v-if="canShowAdminShortcut"
    class="button is-white"
    :to="adminShortcutTarget"
    data-testid="admin-header-button"
  >
    <span class="icon">
      <i class="fas fa-building" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
    </span>
    <span>{{ t("common.departments") }}</span>
  </router-link>
</template>

<style scoped>
.transform-color-black {
  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
}

.transform-color-red {
  filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
}
</style>
