<script setup lang="ts">
// import { isEmpty } from "lodash";
// import { nanoid } from "nanoid"
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
// import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/cms/page/parseSQL";
// import { buildTree } from "@/utils/cms/page/recusive";
// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";

// const emit = defineEmits(["selectComponent"]);

// const _props = defineProps<{
//   content?: any[];
//   component?: any;
// }>();

// const store = reactive({
//   page: useCmsPageStore(),
//   section: usePageSectionStore(),
//   component: usePageComponentStore(),
// });

// const SETTING_OPTIONS = {
//   MAX_ELEMENT: 10,
// };

// const _dataResult = computed(() => {
//   let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill({});
//   const result = getInputValue(_props.content, "ARRAY");
//   result &&
//     result.length > 0 &&
//     _components.map((_: any, index: any) => {
//       _components[index] = result[index] || null;
//     });
//   return _components;
// });

// async function dropData(event: any, data: any) {
//   if (event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`)) {
//     const data = event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`);
//     const { dataResult } = JSON.parse(data);
//     const dataInsert = {
//       id: nanoid(10),
//       title: dataResult.title,
//       slug: dataResult.code,
//       childs: [],
//       parentId: null,
//       data: null,
//       typeChild: enumPageComponentStaticChild.DEFAULT,
//     };
//     const getJSonContent = JSON.parse(_props.content)
//     const checkDataResult = getInputValue(getJSonContent, "ARRAY");
//     const result: any = _props.content ? [...checkDataResult, { ...dataInsert }] : [{ ...dataInsert }];
//     store.component.setStaticData(result, _props.component.id);
//   }
// }
</script>

<template>
  <!-- <nav>
    <div class="d-flex gap-3 justify-content-center align-items-center">
      <RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />

      <div class="empty" @dragover.prevent @drop.stop.prevent="dropData">
        <i class="ri-add-fill"></i>
      </div>
    </div>
  </nav> -->
  ád
</template>

<style lang="scss" scoped>
.empty {
  width: 100px;
  min-height: 20px;
  border-radius: 4px;
  background: #409eff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 18px;
  color: white;
  margin: 5px 0px;
}
</style>
