<template>
<b-row class="justify-content-center">
    <b-col lg="7" sm="12" xs="12" class="download-path">
      <h5>Schedules</h5>
      <div class="schedules-downloads" v-if="!schedules.listCompleted">
        <b-progress id="schedulesProgress" :max="schedules.progress.totalFiles" variant="info">
          <b-progress-bar :value="schedules.progress.currentFileIndex">
            <strong>{{schedules.progress.currentFileIndex}} / {{schedules.progress.totalFiles}}</strong>
          </b-progress-bar>
        </b-progress>
        <span class="song-name">{{schedules.progress.fileName}}</span>

        <b-progress id="musicProgress" :max="100">
          <b-progress-bar :value="schedules.progress.percentage" animated>
            <strong>{{ schedules.progress.percentage }}% / 100%</strong>
          </b-progress-bar>
        </b-progress>
        
        <span class="download-speed">
          <span class="size" v-text="schedules.progress.currentMb"></span>
          of 
          <span class="size" v-text="schedules.progress.totalMb"></span>
          @ 
          <span class="size" v-text="schedules.progress.speed"></span>
          <strong>Total:</strong> <span class="size">{{schedules.filesSizeDownloaded}}</span> / <span class="size">{{schedules.filesSize}}</span>
        </span>
      </div>
      <b-alert variant="success" :show="schedules.listCompleted">
        <i class="fa fa-check-circle"></i>
        All schedules has been downloaded
      </b-alert>
    </b-col>


    <b-col lg="7" sm="12" xs="12" class="download-path">
      <h5>Announces</h5>
      <div class="announces-downloads" v-if="!announces.listCompleted">
        <b-progress id="schedulesProgress" :max="announces.progress.totalFiles" variant="secondary">
          <b-progress-bar :value="announces.progress.currentFileIndex">
            <strong>{{ announces.progress.currentFileIndex }} / {{ announces.progress.totalFiles }}</strong>
          </b-progress-bar>
        </b-progress>
        <span class="song-name">{{announces.progress.fileName}}</span>

        <b-progress id="musicProgress" :max="100">
          <b-progress-bar :value="announces.progress.percentage" animated>
            <strong>{{ announces.progress.percentage }}% / 100%</strong>
          </b-progress-bar>
        </b-progress>
        <span class="download-speed">
          <span class="size" v-text="announces.progress.currentMb"></span>
          of 
          <span class="size" v-text="announces.progress.totalMb"></span>
          @ 
          <span class="size" v-text="announces.progress.speed"></span>
          <strong>Total:</strong>   <span class="size">{{announces.filesSizeDownloaded}}</span> / <span class="size">{{announces.filesSize}}</span>
        </span>
      </div>
      <b-alert variant="success" :show="announces.listCompleted">
        <i class="fa fa-check-circle"></i>
        All announces has been downloaded
      </b-alert>
    </b-col>
    
</b-row>
  
</template>

<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";

export default {
  name: "Downloads",

  computed: {
    ...mapState("downloads", ["schedules", "announces"])
  },

  watch: {
    "schedules.error.message"() {
      app.Toasted(
        "Schedules",
        `Download Error: ${this.schedules.error.message}`,
        "error"
      );
    },

    "announces.error.message"() {
      app.Toasted(
        "Announces",
        `Download Error: ${this.schedules.error.message}`,
        "error"
      );
    }
  },

  mounted() {}
};
</script>

<style scoped lang="scss">
@import "../styles/sass/variables";

.download-path {
  margin-bottom: 20px;
  padding-bottom: 20px;

  h5 {
    color: $smg;
    border-bottom: 1px solid $smg;
  }

  .song-name {
    padding: 10px;
    font-weight: 500;
    min-height: 4em !important;
    margin-bottom: 0px !important;
  }

  .download-speed {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: lighten($gray, 20);

    .size {
      display: inline-flex;
      justify-content: center;
      min-width: 50px;
    }
  }
}

.progress {
  position: relative;
  background-color: #d2d5d8;

  .progress-bar {
    display: flex;
    align-items: center;
    background-color: #858e96;
    strong {
      padding: 0px 5px 0px 5px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>