<template>
  <div class="tree-view">
    <TreeViewNode
      :entry="rootEntry"
      :list-files="listFiles"
      :active-path="activePath"
      :depth="0"
      :fallback-icon="fallbackIcon"
      :expand-on-mount="expandRoot"
      :drop-handler="dropHandler"
      @navigate="$emit('navigate', $event)"
    />
  </div>
</template>

<script setup>

import { computed } from 'vue';
import TreeViewNode from './TreeViewNode.vue';

const props = defineProps({
  listFiles: {
    type: Function,
    required: true,
  },
  activePath: {
    type: String,
    default: '/',
  },
  fallbackIcon: {
    type: String,
    default: '',
  },
  rootLabel: {
    type: String,
    default: '/',
  },
  expandRoot: {
    type: Boolean,
    default: true,
  },
  dropHandler: {
    type: Function,
    default: null,
  },
});

defineEmits(['navigate']);

const rootEntry = computed(() => ({
  name: props.rootLabel,
  path: '/',
  isDirectory: true,
  icon: props.fallbackIcon,
}));

</script>

<style scoped>

.tree-view {
  display: flex;
  overflow: auto;
  height: 100%;
  padding: 4px;
}

</style>
