<template>
  <div>
    <label v-if="label" :for="id">
      <span v-html="label"></span>
      <IconImage
        v-if="!disabled"
        src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/b6dc254166b4.bin"
        :id="`ClearUploadButton-${id}`"
        class="clear-upload-btn"
        @click="$emit('clear')"
      />
    </label>
    <div class="input-group mb-3">
      <form
        :id="id"
        :action="uploadUrl"
        :style="{ width: computedWidth, pointerEvents: disabled ? 'none' : 'auto' }"
        class="dropzone"
        :class="{ disabled: disabled }"
      >
        <slot>
          <div class="dz-message">Drop files here or click to upload</div>
        </slot>
      </form>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import IconImage from '../IconImage.vue'

const props = defineProps({
  label:     { type: String, default: '' },
  id:        { type: String, required: true },
  uploadUrl: { type: String, default: '/File/Upload/Unknown' },
  width:     { type: String, default: '100%' },
  disabled:  { type: Boolean, default: false },
})

defineEmits(['files-changed', 'clear'])

const computedWidth = computed(() => props.width || '100%')
</script>

<style scoped>
.clear-upload-btn {
  cursor: pointer;
  margin-left: 0.5rem;
}
</style>
