<script setup lang="ts">
import { computedAsync } from '@vueuse/core';
import DirectoryListContextMenu from '~/components/DirectoryListContextMenu.vue';
import RenameEntryDialog from '~/components/actions/RenameEntryDialog.vue';
import { getWarrenDirectory } from '~/lib/api/warrens';
import type { DirectoryEntry } from '~/types';

definePageMeta({
    middleware: ['authenticated'],
});

const warrenStore = useWarrenStore();
const loadingIndicator = useLoadingIndicator();

if (warrenStore.current == null) {
    await navigateTo({
        path: '/warrens',
    });
}

const entries = computedAsync<DirectoryEntry[]>(async () => {
    if (warrenStore.current == null) {
        return [];
    }

    loadingIndicator.start();
    warrenStore.loading = true;

    const entries = await getWarrenDirectory(
        warrenStore.current.warrenId,
        warrenStore.current.path
    );

    warrenStore.loading = false;
    loadingIndicator.finish();

    return entries;
}, []);
</script>

<template>
    <div class="grow">
        <DirectoryListContextMenu class="w-full grow">
            <DirectoryList v-if="entries != null" :entries="entries" />
        </DirectoryListContextMenu>
        <RenameEntryDialog />
    </div>
</template>
