<script setup lang="ts">
import { UiFileUploadBox } from '@/components/UiFileUploadBox';
import type { UiFileUploadBoxEmits } from '@/components/UiFileUploadBox/types';
import type { UiFileUploadProps } from './types';

defineOptions({
  name: 'UiFileUpload',
});

const props = withDefaults(defineProps<UiFileUploadProps>(), {
  accept: undefined,
  multiple: true,
  maxFileSizeBytes: undefined,
  disabled: false,
  supportedTypesLabel: '',
  maxSizeLabel: '',
  dropLabel: 'Drop files here',
  chooseLabel: 'Choose files',
  ariaLabel: 'File upload',
});

const emit = defineEmits<UiFileUploadBoxEmits>();
</script>

<template>
  <UiFileUploadBox
    v-bind="props"
    @update:files="emit('update:files', $event)"
    @error="emit('error', $event)"
    @dragenter="emit('dragenter', $event)"
    @dragleave="emit('dragleave', $event)"
    @dragover="emit('dragover', $event)"
    @drop="emit('drop', $event)"
    @click="emit('click', $event)"
    @keydown="emit('keydown', $event)"
    @focus="emit('focus', $event)"
    @blur="emit('blur', $event)"
    @change="emit('change', $event)"
    @picker-open="emit('pickerOpen')"
  >
    <template #title><slot name="title" /></template>
    <template #icon><slot name="icon" /></template>
    <template #choose><slot name="choose" /></template>
    <template #footer><slot name="footer" /></template>
  </UiFileUploadBox>
</template>
