<script setup>

const props = defineProps({
  queryStringData: {
    type: String
  },
  item: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    required: true
  },
  topLevelType: {
    type: String,
    required: true
  },
  platform: {
    type: String,
    required: true
  }
})

const emit = defineEmits(["updateNeeded"])

const files = useFiles()


const availableFiles = ref([])

const setup = async () => {
  if(props.item.files) {
    availableFiles.value = await files.selectSomeDocuments(props.item.files.map(i => i.id)) || []
  }
}

setup()

</script>

<template>
  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
    <template #header v-if="props.platform === 'mobile'">
      <span>Dateien</span>
    </template>
    <Toolbar>
      <DocumentUpload
          :type="props.topLevelType.substring(0,props.topLevelType.length-1)"
          :element-id="props.item.id"
          @uploadFinished="emit('updateNeeded')"
      />
    </Toolbar>

    <DocumentList
        :key="props.item.files.length"
        :documents="availableFiles"
        v-if="availableFiles.length > 0"
    />
    <UAlert
        v-else
        icon="i-heroicons-x-mark"
        title="Keine Dateien verfügbar"
    />
  </UCard>
</template>

<style scoped>

</style>