<script lang="ts" setup>
const emit = defineEmits(['change'])
const props = defineProps({
  placeholder: {
    type: String,
    default: '点击或拖拽文件到此处',
  },
  placeholderDragover: {
    type: String,
    default: '松开选择文件',
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  accept: {
    type: String,
    default: '',
  },
})

const inputRef = ref<HTMLInputElement | null>(null)
const dragover = ref(false)

const selectedFiles = ref<File[]>([])

const onIncomeFiles = (files?: FileList | null) => {
  if (files && files.length > 0) {
    let wantedFiles = Array.from(files).filter((file) => {
      if (props.accept) {
        const accept = props.accept.split(',').map((type) => type.trim())
        return accept.includes(file.type)
      }
      return true
    })
    if (wantedFiles.length === 0) {
      console.error('no acceptable file')
      return
    }
    selectedFiles.value = props.multiple ? wantedFiles : [wantedFiles[0]]
    emit('change', files)
  }
}
</script>

<template>
  <div
    :class="{
      'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner':
        dragover,
    }"
    class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800 bg-inherit cursor-pointer select-none transition duration-200 hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
    @click="inputRef?.click()"
    @dragover.prevent="dragover = true"
    @dragleave.prevent="dragover = false"
    @drop.prevent="
      ($event) => {
        dragover = false
        if (!$event.dataTransfer?.files) return
        onIncomeFiles($event.dataTransfer?.files)
      }
    "
  >
    <input
      ref="inputRef"
      :accept="accept"
      :multiple="multiple"
      class="hidden"
      type="file"
      @change="onIncomeFiles(inputRef?.files)"
    />
    <div
      :class="{
        'pb-6': selectedFiles.length > 0,
      }"
      class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
    >
      <Icon
        :name="dragover ? 'i-tabler-drag-drop' : 'i-tabler-upload'"
        class="text-4xl text-neutral-400 dark:text-neutral-500"
      />
      <p class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
        {{ dragover ? '松开选择文件' : '点击或拖拽文件到此处' }}
      </p>
    </div>
    <div
      v-if="selectedFiles.length > 0"
      class="absolute inset-x-0 bottom-0 pl-2 pr-0.5 py-0.5 flex justify-between items-center bg-neutral-100 dark:bg-neutral-900 border-t dark:border-neutral-800"
    >
      <div class="flex-1 pr-4 overflow-hidden flex items-center gap-1">
        <Icon
          :name="
            selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'
          "
          class="text-neutral-500 dark:text-neutral-400"
        />
        <p
          :title="
            selectedFiles
              .slice(0, 3)
              .map((file) => file.name)
              .join(', ')
          "
          class="text-2xs font-medium overflow-hidden text-ellipsis whitespace-nowrap"
        >
          {{
            selectedFiles
              .slice(0, 3)
              .map((file) => file.name)
              .join(', ')
          }}
        </p>
      </div>
      <div>
        <UButton
          color="red"
          size="xs"
          square
          variant="ghost"
          @click.stop="
            () => {
              selectedFiles = []
              inputRef!.value = ''
            }
          "
        >
          <Icon name="i-tabler-x" />
        </UButton>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
