<script setup>
import { ref } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { Colors } from "@/ThemeConfig.vue";
import { useRouter } from "vue-router";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import SuperUserDashboardPageWrapper from "@/views/dashboards/superUserDashboard/SuperUserDashboardPageWrapper.vue";
import SuperUserDashboardProductAddons
  from "@/views/dashboards/superUserDashboard/products/displays/SuperUserDashboardProductAddons.vue";

const router = useRouter();
// Check if the product id is passed in the route
try {
  if (parseInt(router.currentRoute.value.params.productId) === undefined || isNaN(parseInt(router.currentRoute.value.params.productId))) {
    router.push({ name: "SuperUserDashboardProducts" });
  }
} catch (error) {
  router.push({ name: "SuperUserDashboardProducts" });
}
const product_id = ref(parseInt(router.currentRoute.value.params.productId));
</script>

<template>
  <RestrictedPageWrapper :has-permission="SessionUser.canAccessSuperUser()">
    <SuperUserDashboardPageWrapper
      title="Produkt administration"
      subtitle="Her kan du håndtere produkter"
    >
      <template #default>
        <p>Produkt id: {{ product_id }}</p>
        <!-- Addons -->
        <SuperUserDashboardProductAddons :product_id="product_id" />
      </template>
    </SuperUserDashboardPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>