<template>
  <v-list-item
    style="background-color: #434343"
    @click.stop="downloadClicked"
    :title="file.rel_name"
    :subtitle="fs_format(file.size)"
  >
    <template v-slot:prepend>
      <v-btn @click.stop="downloadClicked" :disabled="!is_download_finished" icon="mdi-download" color="green" variant="text"/>
      <v-btn v-if="file.is_video" @click.stop="fluxClicked" :disabled="!is_download_finished" icon="mdi-vlc" color="orange" variant="text"></v-btn>
      <v-dialog v-if="file.is_stream_video" v-model="video_modal" width="75%" height="100%">
        <template v-slot:activator="{ props }">
          <v-btn v-bind="props" icon="mdi-play" variant="text"/>
        </template>
        <v-card>
          <VideoPlayer class="text-center"/>
        </v-card>
      </v-dialog>
    </template>
  </v-list-item>
</template>

<script setup>
import {fs_format} from "@/plugins/utils.js";
import VideoPlayer from "@/components/utils/VideoPlayer.vue";
</script>

<script>
export default {
  props: {
    file: {
      required: true,
      type: Object,
    },
    is_download_finished: {
      required: true,
      type: Boolean,
    }
  },
  data(){
    return {
      video_modal: false,
    }
  },
  methods: {
    downloadClicked(){
      if(!this.is_download_finished) return;
      if(this.$qt.is_active){
        this.$qt.callMethod("add_files", [this.file]);
      }else{
        let a = document.createElement("a");
        a.href = this.file.download_url;
        a.setAttribute("download", "download");
        a.click();
      }
    },
    fluxClicked(){
      const full_url = new URL(this.file.flux_url, window.location.href).href
      navigator.clipboard.writeText(full_url)
      .then(() => {
        // Optionnel: Vous pouvez ajouter une notification pour indiquer à l'utilisateur que l'URL a été copiée
        console.log('URL copiée dans le presse-papier');
      })
      .catch(err => {
        console.error('Erreur lors de la copie dans le presse-papier:', err);
      });
    }
  }
}
</script>