<template>
  <v-list density="compact">
    <div v-if="loading" class="text-center">
      <v-progress-circular indeterminate/>
      Loading files ...
    </div>
    <FileItem v-for="file in files" :key="file.id" :file="file" :is_download_finished="is_download_finished"/>
  </v-list>
</template>

<script setup>
import FileItem from "@/components/torrent/FileItem.vue";
</script>

<script>
export default {
  props: {
    torrent_id: {
      required: true,
      type: String,
    },
    is_download_finished: {
      required: true,
      type: Boolean,
    }
  },
  data(){
    return {
      loading: true,
      files: [],
      filters: {
        torrent: this.torrent_id,
      }
    }
  },
  async mounted(){
    await this.fetchFiles();
  },
  methods: {
    async fetchFiles(){
      this.loading = true;
      let response = await fetch(`/api/torrent/files/?${new URLSearchParams(this.filters)}`);
      this.files = await response.json();
      this.loading = false;
      return this.files;
    }
  }
}
</script>