<template>
  <div>
    <span class="name">{{taskDescription}}</span>
    <div class="spinner" :class="{idle: idle}">
      <div v-for="i in 6" :key="i"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["getCurrentAwaitables", "connected"]),
    taskDescription() {
      if(!this.connected){
        return "Disconnected"
      }
      if(this.idle){
        return "Server idle"
      }
      let awaitable = this.getCurrentAwaitables[0].description;
      if (this.getCurrentAwaitables.length > 1) {
        return `${awaitable} and ${this.getCurrentAwaitables.length - 1} more`
      }
      return awaitable
    },

    idle() {
      // return true;
      return this.getCurrentAwaitables.length == 0;
    },

  }
};
</script>

<style scoped>

.spinner {
  display: inline-block;
  position: relative;
  width: 160px;
  height: 10px;
}
.spinner div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: var(--accent50);
  animation: spinner 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.idle div {
  animation: none;
  top: 12px;
  height: 4px;
  background: var(--accent50);
}
.spinner div:nth-child(1) {
  left: 8px;
  animation-delay: 0s;
}
.spinner div:nth-child(2) {
  left: 32px;
  animation-delay: 0.12s;
}
.spinner div:nth-child(3) {
  left: 56px;
  animation-delay: 0.24s;
}
.spinner div:nth-child(4) {
  left: 80px;
  animation-delay: 0.36s;
}
.spinner div:nth-child(5) {
  left: 104px;
  animation-delay: 0.48s;
}
.spinner div:nth-child(6) {
  left: 128px;
  animation-delay: 0.6s;
}
@keyframes spinner {
  0% {
    top: -80px;
    height: 124px;
    background: var(--accent);
  }
  50%,
  100% {
    top: 12px;
    height: 4px;
    background: var(--accent50);
  }
}
</style>