<template>
  <v-card class="dm-details-card">
    <v-card-actions>
      <v-text-field :model-value="dm_download_location" readonly @click="$qt.callMethod('change_path')"></v-text-field>
    </v-card-actions>
    <v-divider/>
    <v-card-text class="scrollable-content">
      <!-- Liste des fichiers en téléchargement -->
      <div v-if="Object.keys(filterFiles.downloading).length > 0">
        <h3>Fichiers en téléchargement</h3>
        <v-list density="compact">
          <v-list-item v-for="(file, key) in filterFiles.downloading" :key="key">
            <template v-slot:title>
              {{ file.rel_path }}
            </template>
            <template v-slot:subtitle>
              <v-progress-linear
                  :model-value="file.stats.percent" height="12" color="blue">
              </v-progress-linear>
            </template>
          </v-list-item>
        </v-list>
      </div>
      <!-- Liste des fichiers en attente -->
      <div>
        <h3>Fichiers en attente</h3>
        <v-list density="compact">
          <v-list-item v-for="(file, key) in filterFiles.waiting" :key="key">
            <template v-slot:title>
              {{ file.rel_path }}
            </template>
            <template v-slot:subtitle>
              En attente
            </template>
          </v-list-item>
        </v-list>
      </div>

      <!-- Liste des fichiers terminés -->
      <div>
        <h3>Fichiers terminés</h3>
        <v-list density="compact">
          <v-list-item v-for="(file, key) in filterFiles.finished" :key="key">
            <template v-slot:title>
              {{ file.rel_path }}
            </template>
            <template v-slot:subtitle>

            </template>
          </v-list-item>
        </v-list>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
import {fs_format, fs_speed_format} from "@/plugins/utils.js";
</script>

<script>


export default {

  props: {
    dm_files: {
      required: true,
      type: Object
    },
    dm_status: {
      required: true,
      type: Object
    },
    dm_download_location: {
      required: true,
      type: String
    }
  },
  data(){
    return {

    }
  },
  mounted(){

  },
  methods: {

  },
  computed: {
    filterFiles(){
      let waiting = {},
        downloading = {},
        finished = {};

      for(const [file_id, file] of Object.entries(this.dm_files)){
        if(file.downloaded){
          finished[file_id] = file;
        }else if(file_id in this.dm_status.downloading){
          downloading[file_id] = file;
          if(file_id in this.dm_status["downloader_stats"]){
            downloading[file_id]["stats"] = this.dm_status["downloader_stats"][file_id];
          }else{
            downloading[file_id]["stats"] = {
              total_size: file.size,
              downloaded_size: 0,
              speed: 0,
              percent: 0,
              eta: 0,
            };
          }
        }else{
          waiting[file_id] = file;
        }
      }

      return {waiting, downloading, finished};
    }
  }
};
</script>

<style>
.scrollable-content {
  max-height: 400px; /* Définissez la hauteur maximale souhaitée */
  overflow-y: auto;  /* Active le défilement vertical quand nécessaire */
  overflow-x: hidden; /* Empêche le défilement horizontal */
  padding-right: 8px; /* Espace pour la barre de défilement */
}

.dm-details-card {
  display: flex;
  flex-direction: column;
}
</style>