<script setup >

const props = defineProps({
  fileData: {
    type: Object,
    default: {
      type: null
    }
  }
})

const emit = defineEmits(["uploadFinished"])

const modal = useModal()
const profileStore = useProfileStore()

const uploadInProgress = ref(false)
const availableFiletypes = ref([])

const setup = async () => {
  availableFiletypes.value = await useSupabaseSelect("filetags")
}

setup()

const uploadFiles = async () => {
  uploadInProgress.value = true;

  let fileData = props.fileData
  delete fileData.typeEnabled



  await useFiles().uploadFiles(fileData,  document.getElementById("fileUploadInput").files,[],true)

  uploadInProgress.value = false;
  emit("uploadFinished")
  modal.close()
}
</script>

<template>
  <UModal>
    <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
      <template #header>
        <div class="flex items-center justify-between">
          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
            Datei hochladen
          </h3>
          <UButton
              color="gray"
              variant="ghost"
              icon="i-heroicons-x-mark-20-solid"
              class="-my-1"
              @click="modal.close()"
              :disabled="uploadInProgress"
          />
        </div>
      </template>

      <UFormGroup
          label="Datei:"
      >
        <UInput
            type="file"
            id="fileUploadInput"
            multiple
            accept="image/jpeg, image/png, image/gif, application/pdf"
        />
      </UFormGroup>
      <UFormGroup
          label="Typ:"
          class="mt-3"
      >
        <USelectMenu
            option-attribute="name"
            value-attribute="id"
            searchable
            searchable-placeholder="Suchen..."
            :options="availableFiletypes"
            v-model="props.fileData.type"
            :disabled="!props.fileData.typeEnabled"
        >
          <template #label>
            <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
            <span v-else>Keine Typ ausgewählt</span>
          </template>
        </USelectMenu>
      </UFormGroup>

      <template #footer>
        <UButton
            @click="uploadFiles"
            :loading="uploadInProgress"
            :disabled="uploadInProgress"
        >Hochladen</UButton>
      </template>
    </UCard>
  </UModal>
</template>

<style scoped>

</style>