<script setup>
import { ref } from "vue";
import { VBtn } from "vuetify/components/VBtn";
const props = defineProps({
  accept: { type: String, required: false, default: "*" },
  multiple: { type: Boolean, required: false, default: false },
  iconOnly: { type: Boolean, required: false },
  modelValue: { type: null, required: false },
  tooltip: { type: null, required: false, default: "Upload File" }
});
const emit = defineEmits(["update:modelValue"]);
const fileInput = ref();
const files = ref();
const openFileInput = () => {
  fileInput.value?.click();
};
const reset = () => {
  files.value = void 0;
};
const emitFiles = () => {
  emit("update:modelValue", files.value);
  files.value = [];
};
defineExpose({ reset });
</script>

<template>
  <v-btn
    v-bind="$attrs"
    @click="openFileInput"
    v-tooltip="tooltip"
  >
    <template
      v-for="(_, name, index) in $slots"
      :key="index"
      #[name]="slotData"
    >
      <slot
        :name="name"
        v-bind="slotData || {}"
      />
    </template>
  </v-btn>
  <v-file-input
    ref="fileInput"
    v-model="files"
    @update:modelValue="emitFiles"
    :accept="props.accept"
    :multiple="props.multiple"
    style="display: none"
  />
</template>
