<template>
    <div class="file-tree">
        <TreeNode
            v-for="root in roots"
            :key="root.prefix"
            :label="root.label"
            :path="root.prefix"
            :token="token"
            :active-path="activePath"
            :expand-to="expandTo"
            :depth="0"
            :hide-self="hideRoot"
            :folders-only="foldersOnly"
            @select="$emit('select', $event)"
        />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import TreeNode from './TreeNode.vue';

const props = defineProps<{
    token: string;
    activePath: string;
    expandTo: string;
    roots?: string[];
    hideRoot?: boolean;
    foldersOnly?: boolean;
}>();

defineEmits<{ (e: 'select', path: string): void }>();

const roots = computed(() =>
    (props.roots && props.roots.length > 0 ? props.roots : ['shared', 'workspace-titan'])
        .map(r => ({ label: r, prefix: r }))
);
</script>

<style scoped>
.file-tree {
    padding: 4px 0;
}
</style>
