<script setup>
import { computed, defineProps, onMounted, ref, watch } from "vue";
import { twMerge } from "tailwind-merge";

/*
title: title
data: [{
    title: subtitle,
    key, // required
}]
*/

const props = defineProps({
  open: Boolean,
  data: Array,
  cls: {
    type: String,
    default: "",
  },
  onClick: Function, // 點擊左鍵
  onRightClick: Function, // 點擊右鍵
  filenameInputIsOpen: Boolean,
  selected: Object,
  edit: Function,
  openItem: Array,
});

const openChildren = ref([]);
const toggleOpenChildren = (dataParentKey) => {
  if (openChildren.value.includes(dataParentKey)) {
    openChildren.value = [];
  } else {
    openChildren.value = [dataParentKey];
  }
};

watch(
  () => props.openItem,
  () => {
    openChildren.value = props.openItem;
  }
);

// 初始全部展開
// const getInitFileKey=(d)=>{
//   let initKey = [];
//   d.forEach(element => {
//     if(element.children?.length > 0){
//       let childrenKey = getInitFileKey(element.children);
//       initKey.push(element.key, ...childrenKey);
//   }
//   });
//   return initKey;
// }
// onMounted(()=>{
//   const keys = getInitFileKey(props.data);
//   openChildren.value.push(...keys);
// })
</script>

<template>
  <ul
    :class="
      twMerge(
        'flex-col text-xl',
        cls,
        openChildren.includes(d.key) || open ? 'flex' : 'hidden'
      )
    "
    v-for="d in data"
    :key="d.key"
    :data-parent="d.key"
    :open="open"
  >
    <li
      v-if="d.children?.length > 0"
      class="py-1 cursor-pointer"
      :data-value="d.key"
    >
      <font-awesome-icon
        :icon="['fas', 'caret-right']"
        :class="
          twMerge(
            openChildren.includes(d.key) ? 'rotate-90' : '',
            'group-hover/item:text-success'
          )
        "
        @click.stop.prevent="
          (e) => {
            toggleOpenChildren(d.key);
            onClick && onClick(d.key, d);
          }
        "
      />
      <font-awesome-icon
        :icon="['fas', 'folder']"
        class="ml-5 text-amber-400"
      />
      <input
        v-if="filenameInputIsOpen && selected?.key === d.key"
        type="text"
        class="ml-2 px-2 w-3/4"
        :value="d.title"
        @click.stop.prevent
        v-focus
        @change.stop.prevent="
          (e) => {
            console.log('edit', e);
            edit(e);
          }
        "
      />
      <span
        v-else
        class="ml-2 hover:text-success"
        @click.stop.prevent="
          (e) => {
            toggleOpenChildren(d.key);
            onClick && onClick(d.key, d);
          }
        "
        @contextmenu.prevent.stop="
          (e) => {
            console.log(e);
            onRightClick(e, d);
          }
        "
      >
        {{ d.title }}</span
      >
    </li>
    <li v-else class="pl-7 py-1 cursor-pointer" :data-value="d.key">
      <font-awesome-icon
        :icon="['fas', 'folder']"
        class="mr-2 text-amber-400"
        @click.stop.prevent="
          (e) => {
            toggleOpenChildren(d.key);
            onClick && onClick(d.key, d);
          }
        "
      />
      <input
        v-if="filenameInputIsOpen && selected?.key === d.key"
        class="ml-2 px-2 w-3/4"
        type="text"
        :value="d.title"
        v-focus
        @click.stop.prevent
        @change.stop.prevent="
          (e) => {
            console.log('edit', e);
            edit(e);
          }
        "
      />
      <span
        v-else
        class="ml-2 hover:text-success"
        @click="
          (e) => {
            onClick && onClick(d.key, d);
          }
        "
        @contextmenu.stop.prevent="
          (e) => {
            onRightClick(e, d);
          }
        "
      >
        {{ d.title }}</span
      >
    </li>
    <FileSystemCollapse
      v-if="d.children?.length > 0"
      :data="d.children"
      cls="pl-4"
      :open="openChildren.includes(d.key)"
      :onClick="onClick"
      :key="d.key"
      :openItem="openItem"
      :selected="selected"
      :filenameInputIsOpen="filenameInputIsOpen"
      :edit="edit"
      :onRightClick="onRightClick"
    />
  </ul>
</template>

<style lang="css" scoped></style>
