<script setup>
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import {useSlots, defineProps} from 'vue';
import {IS_DEV} from "@/main.js";
const props = defineProps(['permission']);
const slots = useSlots();

const isSlotEmpty = () => {
  return Object.keys(slots).length === 0;
}

// Show an error if the permission prop is not provided
if (!props.permission) {
  console.error('The permission prop is required for the requiresPermission component');
}

// Check if the user has access to the permission

const checkAccess = () => {
  // If the global debug flag is set to true, show the missing permission warning in the console
  if (IS_DEV) {
    if (!SessionUser.hasPermission(props.permission)) {
      console.warn(`The user does not have the permission ${props.permission}`);
    }
    else {
      console.log(`The user has the permission ${props.permission}`);
    }
  }
  return SessionUser.hasPermission(props.permission);
}
</script>

<template>
  <div v-if="checkAccess()">
    <slot name="default"></slot>
  </div>
  <div v-else-if="slots.fail">
    <slot name="fail"></slot>
  </div>
</template>

<style scoped>

</style>