<script setup lang="ts">
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
const { getFolder } = useTreeDataStore()

const props = withDefaults(
  defineProps<{
    data: TreeDataFolder[]
    level: number
  }>(),
  {
    level: 0,
  }
)
</script>

<template>
  <div>
    <q-list v-for="folder in data" class="rounded-borders">
      <q-expansion-item
        @click="() => getFolder(folder.pathname, false)"
        :header-inset-level="level * 0.25"
        :group="level.toString()"
        :hide-expand-icon="level === 4"
        :icon="
          level === 1
            ? 'mdi-file-cabinet'
            : level === 2
            ? 'inbox'
            : 'o_folder_open'
        "
        :label="folder.name"
        v-model="folder.status"
      >
        <tree-explorer
          v-if="folder.folder"
          :data="folder.folder"
          :level="props.level + 1"
        />
      </q-expansion-item>
    </q-list>
  </div>
</template>

<style lang="scss">
.q-item[aria-expanded='true'] {
  color: $primary;
}

.q-item[aria-expanded='true'] .q-icon {
  color: $primary;
}
</style>
