<script setup lang="ts">
import { QFile } from 'quasar';
import { ref } from 'vue';
import { MainButton } from '../button';

type Value = File[] | File;

defineProps<{
  label?: string;
  readonly?: boolean;
  accept?: string;
  multiple?: boolean;
}>();

defineEmits<{
  (e: 'file', v: Value): void;
}>();

const file = ref<Value | undefined>();

const element = ref<InstanceType<typeof QFile>>();
</script>

<template>
  <div
    class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap surface-2"
  >
    <q-img src="/images/upload.png" width="150px" />
    <MainButton
      color="var(--blue-6-hsl)"
      icon="mdi-import"
      solid
      pill
      @click.stop="element?.pickFiles()"
    >
      {{ label }}
    </MainButton>
    <q-file
      :multiple="!!multiple"
      :accept
      ref="element"
      v-show="false"
      v-model="file"
      @update:model-value="(v: Value) => $emit('file', v)"
    />
  </div>
</template>
