<script setup lang="ts">
  import type FileDto from "@/dto/file-dto.ts";
  import Card from 'primevue/card';
  import Button from 'primevue/button';
  import {computed} from "vue";
  import { useConfirm } from "primevue/useconfirm";

  const confirm = useConfirm();

  const props = defineProps<{
    item: FileDto
  }>();
  
  const emit = defineEmits(["deleted"]);
  
  const url = computed(() => {
    return `http://localhost:5118/f/${props.item.filename}`;
  })
  
  const removeItem = async () => {
    confirm.require({
      message: `Are you sure you want to delete ${props.item.originalFilename}?`,
      header: 'Confirmation',
      icon: 'pi pi-exclamation-triangle',
      rejectProps: {
        label: 'Cancel',
        severity: 'secondary',
        outlined: true
      },
      acceptProps: {
        label: 'Delete'
      },
      accept: async () => {
        await fetch(`/api/file/delete?filename=${props.item.filename}`, {
          method: 'GET',
          credentials: 'include'
        });

        emit("deleted");
      },
      reject: () => {}
    });
  }
  
  const download = () => {
    location.href = url.value;
  }
</script>

<template>
  <Card style="width: 25rem; overflow: hidden;">
    <template #title>{{ item.originalFilename }}</template>
    <template #content>
      <p>Uploaded as {{ item.filename }}</p>
      <p>Size in bytes: {{ item.sizeInBytes }}B</p>
    </template>
    <template #footer>
      <div class="flex gap-4 mt-1">
        <Button v-on:click.prevent="removeItem" label="Delete" severity="secondary" outlined class="w-full" />
        <Button v-on:click.prevent="download" label="Download" class="w-full" />
      </div>
    </template>
  </Card>
</template>

<style scoped>

</style>