<template>
    <SidebarTemplate>
        <ScrollComponent>
            <div class="content-l">
                <div class="nav">
                    <NuxtLink class="resources" v-for="key in ResourceType" :to="getRoute(key, namespace)" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ RESOURCE_DISPLAY_NAMES.get(key) }}</NuxtLink>
                </div>
                <div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
                <div class="nav" :class="{ hide: !inNamespaceScopedResource }">
                    <NuxtLink v-for="[key, value] in namespaces" class="namespace" :to="getRoute(resource, key)">{{ value }}</NuxtLink>
                </div>
            </div>
        </ScrollComponent>
        <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 { StringUtils, useNamespaceStore } from '#imports';
import { RESOURCE_DISPLAY_NAMES, ResourceType } from '~/classes/ResourceTypes';

const namespaceStore = useNamespaceStore();

const namespaces = computed(() => namespaceStore.getNamespaceNames(true));

const user = getUser();

const accountPopup = ref();

const resource = computed(() => {
    return useRoute().params.resource as string;
});

const namespace = computed(() => {
    return useRoute().params.namespace as string;
});

function getRoute(resource: string, namespace: string) {
    return StringUtils.format("/account/inspect/%s/%s", resource, namespace)
}

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', 'pvs', 'namespaces'].includes(resource))
    {
        return false;
    }
    return true;
});
</script>