<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'
import useStorage from '@/stores/storage'

const { isSearch } = storeToRefs(useSearchDataStore())
const { isFilePreview } = storeToRefs(useFileInfoStore())
const store = useStorage()

const props = withDefaults(
  defineProps<{
    data: typeof store.tree
    level?: number
  }>(),
  {
    level: 1,
  },
)
</script>

<template>
  <div>
    <q-list v-for="v in data" class="rounded-borders">
      <q-expansion-item
        @click="
          () => {
            store.goto(v.pathname)
            isSearch = false
            isFilePreview = 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="v.name"
        class="text-overflow-handle active"
      >
        <tree-explorer
          v-if="v.folder"
          :data="v.folder"
          :level="props.level + 1"
        />
      </q-expansion-item>
    </q-list>
  </div>
</template>

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

.text-overflow-handle,
:deep(.q-item__label) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
