<template>
  <b-row class="justify-content-center">
    <b-col lg="7" sm="12" xs="12">
      <b-row>
        <b-col cols="12">
            <div class="song-name">
              <span>
                {{currentSong.originalName}}
              </span>
              <span class="file-name">
                {{currentSong.fileName}}
              </span>
            </div>
            <h6 class="list-name">{{currentList}}</h6>
            <b-progress :value="progressBar.value" :max="progressBar.max  " height="10px" animated></b-progress>
            <span class="music-counter">{{currentSongIndex}} / {{songCount}}</span>
            <div class="music-duration">
              <span class="passing-time">{{position | toDuration}}</span>
              <span class="remaining-time">{{duration | toDuration}}</span>
            </div>
        </b-col>
      </b-row>
      <b-row>
        <b-col cols="12">
          <div class="playerController">
            <div class="main-controllers">
              <!-- <button :disabled="!playing"><i class="fa fa-backward fa-fw"></i></button> -->
              <button class="playAndPause" @click="stopList" :disabled="!playing">
                <i class="fa fa-stop"></i>
                </button>
              <button @click="nextSong" :disabled="!playing"><i class="fa fa-forward"></i></button>
            </div>
            <div class="other-controllers">
              <button
                :class="{'active': announce}"
                @click="changeAnnounces"
                v-b-tooltip.hover title="Announces"
                :boundary="{viewport:768}"
                >
                <i class="fa fa-bullhorn"></i>
              </button>
              <button :class="{'active': looping}" @click="changeLooping" v-b-tooltip.hover title="Looping">
                <i class="fa fa-repeat"></i>
              </button>
              <button :class="{'active': shuffle}" @click="changeShuffle" v-b-tooltip.hover title="Shuffle">
                <i class="fa fa-random"></i>
              </button>
              <button @click="refreshPlaylist" v-b-tooltip.hover title="Refresh Playlist">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </b-col>
      </b-row>
      <b-row>
      <vu-meter :left="vumeter.left" :right="vumeter.right" :status="playing"></vu-meter>
      </b-row>
      <b-row>
        <b-col cols="12">
          <vue-scrollbar :style="scrollbar">
            <b-list-group class="music-list">
                <b-list-group-item v-for="(list, index) in playLists" :key="list.key" :id="list.scheduleID" :class="{'active':playingList === list.scheduleID}">
                  <div class="name">
                    <b-badge variant="light" pill>{{index+1}}</b-badge>
                    <span>{{list.scheduleName}}</span>
                    <b-badge variant="success" pill>{{list.total}}</b-badge>
                  </div>
                  <b-button size="sm" v-if="playingList !== list.scheduleID" @click="playList(list.scheduleID)">
                    <i class="fa fa-play"></i>
                  </b-button>
                  <b-button size="sm" variant="outline-primary" v-if="playingList === list.scheduleID " @click="stopList">
                    <i class="fa fa-stop"></i>
                  </b-button>
                </b-list-group-item>
            </b-list-group>
          </vue-scrollbar>
        </b-col>
      </b-row>
    </b-col>
</b-row>
</template>

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

export default {
  name: "Dj",

  data() {
    return {
      // Vue Scrollbar Style Data
      scrollbar: {
        width: "100%",
        maxHeight: "400px",
        marginTop: "-20px"
      }
    };
  },
  computed: {
    ...mapState("djPlayer", [
      "playLists",
      "currentList",
      "currentSongIndex",
      "currentSong",
      "songCount",
      "duration",
      "position",
      "playing",
      "announce",
      "looping",
      "shuffle",
      "playingList",
      "playListFinished",
      "progressBar",
      "vumeter"
    ])
  },

  created() {
    // Call State Actions
    this.getLists();
    this.getStatus();
    this.getPlaying();
  },
  
  methods: {
    ...mapActions("djPlayer", [
      "getLists",
      "getStatus",
      "getPlaying",
      "playList",
      "stopList",
      "nextSong",
      "changeAnnounces",
      "changeLooping",
      "changeShuffle",
      "updatePlayingList",
      "refreshPlaylist"
    ])
  },

  watch: {
    playListFinished() {
      app.Toasted("DJ Player", `${this.currentList} - Finished`, "info");
    }
  }
};
</script>

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

.song-name {
  margin-bottom: 0px !important;

  span {
    font-weight: bold;
    font-size: 18px;
  }
}

.music-counter {
  float: left;
  font-size: 12px;
}

.music-duration {
  float: right;

  span {
    font-size: 12px;
    display: inline-block;

    &:first-child:after {
      content: "-";
      margin-left: 5px;
      float: right;
    }
  }
}

.playerController {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 70px;
  position: relative;

  .main-controllers {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    button {
      border: 1px solid $smg;
      border-radius: 50%;
      color: $smg;
      text-align: center;
      width: $playerControlButtonSize;
      height: $playerControlButtonSize;
      line-height: $playerControlButtonSize;
      outline: none;
      background-color: $white;
      align-self: center;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.5s all ease-in-out;

      &:first-child {
        z-index: 1;
        margin-right: -15px;
      }

      &:disabled {
        color: $gray;
        border-color: $gray;
      }

      &.playAndPause {
        width: $playerControlButtonSize + 10px;
        height: $playerControlButtonSize + 10px;
        line-height: $playerControlButtonSize + 10px;
      }

      &:hover {
        box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.7);
      }
    }
  }

  .other-controllers {
    align-self: center;
    display: flex;
    justify-content: flex-end;
    justify-items: flex-end;
    z-index: 1;

    button {
      background: none;
      border: none;
      width: $playerControlButtonSize - 10px;
      height: $playerControlButtonSize - 10px;
      line-height: $playerControlButtonSize - 10px;
      color: $gray;
      outline: none;
      cursor: pointer;
      transition: 0.2s all ease-in-out;

      &.active {
        color: $smg;
      }
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;

    .main-controllers {
      position: unset;
      margin: 0px;
      margin-bottom: 20px;

      button {
        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
}

.music-list {
  font-size: 13px;
  padding-bottom: 50px;
  & .list-group-item {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;

    button {
      visibility: hidden;
      cursor: pointer;
      border-radius: 100%;
      font-size: 32px;
      width: 1em;
      height: 1em;
      display: flex;
      justify-content: center;
      background-color: $white;
      color: $smg;
      border-color: $smg;
      align-items: center;

      i.fa {
        font-size: 12px;
      }
    }

    .badge {
      margin-right: 10px;
    }

    @media (max-width: 768px) {
      button {
        visibility: visible;
      }
    }

    &:hover,
    &.active {
      button {
        visibility: visible;
      }
    }

    &.active {
      background-color: darken($smg, 7);
      border-color: darken($smg, 7);
    }
  }
}
</style>