<template>
  <McadDropZone
    height="40px"
    @onClick="onClickItems"
    @onDropItems="onDropItems"
  />
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { traverseDirectoryTreeWrapper } from '@/functions/fileReader';
import { useViewerStore } from '@/stores/viewer.store';

const { options } = storeToRefs(useViewerStore());

async function onDropItems(event: DragEvent) {
  const files: Array<File> = [];
  if (event.dataTransfer?.items) {
    await traverseDirectoryTreeWrapper(event.dataTransfer?.items, (file: File) => {
      files.push(file);
      return Promise.resolve();
    });
  }
  await onComplete(files);
}

async function onClickItems(items: Array<File>) {
  await onComplete(items);
}

async function onComplete(items: Array<File>) {
  if (options.value.onMCADUpload) {
    await options.value.onMCADUpload(items.filter((x) => x.name.toLowerCase().includes('.stl')));
  }
}
</script>
