<script setup>
import { TreeItem, TreeRoot } from "reka-ui";
import { Icon } from "@iconify/vue";

const props = defineProps({
  items: {
    default() {
      return [];
    },
  },
});
const emit = defineEmits(["on-select-item"]);

const onSelectItem = (item) => {
  emit("on-select-item", item.detail.value);
};
</script>

<template>
  <TreeRoot
    v-slot="{ flattenItems }"
    class="list-none select-none w-full text-stone-700 p-2 text-sm font-medium"
    :items="items"
    :get-key="(item) => item.title"
    :default-expanded="['components']"
    dir="rtl"
  >
    <!-- <h2 class="font-semibold text-sm text-stone-400 px-2 pt-1 pb-3">
      Directory Structure
    </h2> -->
    <TreeItem
      v-for="item in flattenItems"
      v-slot="{ isExpanded }"
      :key="item._id"
      :style="{ 'margin-right': `${item.level - 0.7}rem` }"
      v-bind="item.bind"
      class="tree-item flex items-center py-1.5 px-3 mb-4 rounded-lg border-[#29D985] outline-none bg-[#F0F1F4] focus:ring-grass8 focus:ring-[#29d985]"
      @select="onSelectItem"
    >
      <template v-if="item.hasChildren">
        <Icon v-if="!isExpanded" icon="lucide:plus" class="h-6 w-6" />
        <Icon v-else icon="lucide:minus" class="h-6 w-6" />
      </template>
      <!-- <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-6 w-6" /> -->
      <div class="pr-1">
        {{ item.value.title }}
      </div>
    </TreeItem>
  </TreeRoot>
</template>

<style scoped>
.tree-item[aria-expanded="true"] {
  background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0%;
  text-align: right;
  color: var(--ui-color-two);

  /* &[data-expanded="true"] {
    background-color: #f7fffd;
  } */
}
</style>
