<template>
  <div
    @drop="onDrop"
    @dragover.prevent="onDragOver"
    @dragleave="onDragLeave"
    @dragenter="onDragEnter"
  >
    <slot :isDragOver="isDragOver"></slot>
  </div>
</template>
<script setup lang="ts">

import { ref } from 'vue';
import {VirtualFile} from '../../model/FileSystem/types';

const isDragOver = ref(false);
const emit = defineEmits<{
  dropFile: [VirtualFile],
}>();

defineProps<{
  accept?: string,
}>();

// const slot = defineSlots<{
//   default(props: {isDragOver: boolean}): any
// }>()

function onDragEnter() {
  isDragOver.value = true;
}

function onDragLeave() {
  isDragOver.value = false;
}

function onDragOver(event: DragEvent) {
  event.preventDefault();

}

function parseMeta(event: DragEvent): VirtualFile | null {
  try {
    const file = event.dataTransfer?.files?.[0];
    if (file) {
      return {
        type: 'file',
        source: 'drop',
        path: [] as string[],
        name: file.name,
        mimeType: file.type
      } as const;
    } else if (event.dataTransfer?.getData('application/json')) {
      return JSON.parse(event.dataTransfer?.getData('application/json'));
    }
  } catch (e) {
  }
  return null;
}


function onDrop(event: DragEvent) {
  event.preventDefault();
  isDragOver.value = false;
  const drop = parseMeta(event);
  if (drop) {
    emit('dropFile', drop);
  }
}
</script>