<script setup>
import {defineProps} from 'vue';
import { useRouter } from 'vue-router';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import Swal from "sweetalert2";
import { ref } from 'vue';
defineProps(['hasPermission']);
const router = useRouter();

const showDebugInfo = ref(false);

// If the user is not initiated, and it takes more than 5 seconds, show an error message
setTimeout(() => {
  if (!SessionUser.isInitiated()) {
    Swal.fire({
      title: 'Error',
      text: 'The user session could not be initiated.',
      icon: 'error',
      confirmButtonText: 'Clear session, and try again',
      showCancelButton: true,
      cancelButtonText: 'Retry',
    }).then(() => {
      SessionUser.auth.forceClearSession();
      window.location.reload();
    });
  }
}, 5000);
</script>

<template>
  <div>
    <div v-if="!SessionUser.isInitiated()">
      <div class="pageloader is-active is-dark">
        <span class="title">Bekræfter bruger...</span>
      </div>
    </div>
    <slot v-if="hasPermission" />
    <div v-else>
      <div class="my-6">
        <h2 class="title is-2">403 Forbidden</h2>
        <h4 class="subtitle is-4">You do not have permission to view this page.</h4>
      </div>
      <div class="message is-danger">
        <div class="message-body">
          <h2>403 Forbidden</h2>
          <p>You do not have permission to view this page.</p>
        </div>
      </div>
      <!-- Simple checks -->
      <p v-if="router.currentRoute.value.path === '/user'">You are on the /user page. <br>You do {{ SessionUser.hasPermission('user') ? '' : 'not' }} have permission ( user ) to view this page.</p>
      <p v-if="router.currentRoute.value.path === '/admin'">You are on the /admin page. <br>You do {{ SessionUser.hasPermission('admin') ? '' : 'not' }} have permission ( admin ) to view this page.</p>
      <p v-if="router.currentRoute.value.path === '/superuser'">You are on the /superuser <br>page. You do {{ SessionUser.hasPermission('superuser') ? '' : 'not' }} have permission ( superuser ) to view this page.</p>
      <div v-if="showDebugInfo">
        <div class="message mb-6">
          <div class="message-header">
            <p>Debug information</p>
            <button class="delete" aria-label="delete" @click="showDebugInfo = false"></button>
          </div>
          <div class="message-body">
            <p class="label">Session user:</p>
            <pre>{{ SessionUser }}</pre>
          </div>
        </div>
      </div>
      <div class="buttons">
        <!-- Button to go back to the previous page -->
        <button class="button is-dark" @click="router.go(-1)">Go back</button>
        <!-- Button to see the debug information -->
        <button class="button is-dark" @click="showDebugInfo = !showDebugInfo" v-if="!showDebugInfo">Show debug information</button>
        <!-- Button to hide the debug information -->
        <button class="button is-dark" @click="showDebugInfo = !showDebugInfo" v-else>Hide debug information</button>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>