<template>
    <SidebarTemplate>
        <div class="content-l">
            <h2>Kubooboo</h2>
            <div class="nav">
                <NuxtLink class="resources" v-for="[key, value] of resources" :to="'/account/inspect/' + key + '/_all'" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ value }}</NuxtLink>
            </div>
            <div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
            <div class="nav" :class="{ hide: !inNamespaceScopedResource }">
                <NuxtLink class="namespace" :to="base + '/_all'">Alle</NuxtLink>
                <NuxtLink v-for="namespace in namespaces" class="namespace" :to="base + '/' + namespace.metadata.name">{{ namespace.metadata.name }}</NuxtLink>
            </div>
        </div>
        <div class="left-center" v-if="user" @click="() => accountPopup.open()">
            <UiIcon>account_circle</UiIcon>
            <p>{{ user.username }}</p>
        </div>
    </SidebarTemplate>
</template>

<script setup lang="ts">
import SidebarTemplate from './SidebarTemplate.vue';

import { useNamespaceStore } from '#imports';

const resources = new Map<string, string>([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["pods", "Pods"], ["custom-resource-definitions", "CDRs"]]);

const namespaceStore = useNamespaceStore();

const namespaces = computed(namespaceStore.getNamespaces);

const currentNamespace = computed(namespaceStore.getCurrentNamespace)

const user = getUser();

const accountPopup = ref();

const base = computed(() => {
    const resource = useRoute().params.resource as string;
    if (resource)
    {
        return '/account/inspect/' + resource;
    }
    throw new Error();
})

const inNamespaceScopedResource: ComputedRef<boolean> = computed(() => {
    const resource = useRoute().params.resource as string;
    if(['custom-resource-definitions', 'nodes'].includes(resource))
    {
        return false;
    }
    return true;
});
</script>