<script setup >

const props = defineProps({
  type: {
    type: String
  },
  elementId: {
    type: String
  }
})

const {type, elementId} = props

const dataStore = useDataStore()
const tags = dataStore.getDocumentTags

const uploadModalOpen = ref(false)
const uploadInProgress = ref(false)
const fileUploadFormData = ref({
  tags: ["Dokument"],
  project: null
})

const openModal = () => {
  console.log("Oepn")
  uploadModalOpen.value = true
}

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

  let fileData = fileUploadFormData.value
  fileData[type] = elementId

  await dataStore.uploadFiles(fileData,  document.getElementById("fileUploadInput").files)

  uploadModalOpen.value = false;
  uploadInProgress.value = false;
}
</script>

<template>
  <UModal
      v-model="uploadModalOpen"
  >
    <UCard :ui="{ 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="uploadModalOpen = false"
              :disabled="uploadInProgress"
          />
        </div>
      </template>

      <UFormGroup
          label="Datei:"
      >
        <UInput
            type="file"
            id="fileUploadInput"
        />
      </UFormGroup>
      <UFormGroup
          label="Tags:"
          class="mt-3"
      >
        <USelectMenu
            multiple
            searchable
            searchable-placeholder="Suchen..."
            :options="tags"
            v-model="fileUploadFormData.tags"
        />
      </UFormGroup>

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

    </UCard>
  </UModal>

  <UButton
      @click="openModal"
  >
    Hochladen
  </UButton>
</template>

<style scoped>

</style>