<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>
          <b-progress :value="position" :max="duration" height="10px" animated></b-progress>
          <span class="song-counter">{{ currentSongIndex }} / {{ songCount }}</span>
          <div class="song-duration">
            <span class="position">{{ position | toDuration }}</span>
            <span class="duration">{{ duration | toDuration }}</span>
          </div>
        </b-col>
      </b-row>
      <b-row>
        <b-col cols="12" class="text-center playerController">
          <button class="control-button" @click="toggleMute">
            <i class="fa fa-fw" :class="isMuted ? 'fa-volume-off' : 'fa-volume-up'"></i>
          </button>
          <button class="control-button" @click="nextSong" v-if="config.hasSchedulesNextButton === '1'">
            <i class="fa fa-fw fa-forward"></i>
          </button>
        </b-col>
        <vu-meter :left="vumeter.left" :right="vumeter.right"></vu-meter>
      </b-row>
    </b-col>
  </b-row>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
import socket from '../scripts/socket';
import types from '../store/mutation-types';

export default {
  name: "Schedules",

  data() {
    return {
      previousVolume: 100,
      isMuted: false
    }
  },

  computed: {
    ...mapState(["config", "masterVolume"]),
    ...mapState("schedules", [
      "currentSongIndex",
      "currentSong",
      "songCount",
      "duration",
      "position",
      "vumeter",
      "playerState",
      "playListFinished"
    ])
  },

  methods: {
    ...mapActions("schedules", ["nextSong"]),

    toggleMute() {
      if (!this.isMuted) {
        // Save current volume before muting
        this.previousVolume = this.masterVolume || 100;
        // Send socket event
        socket.emit('volume', '0');
        this.isMuted = true;
      } else {
        // Restore previous volume
        socket.emit('volume', String(this.previousVolume));
        this.isMuted = false;
      }
    },

    playerStaller() {
      app.Toasted("Schedules", "Playlist Finished", "info");
    }
  },

  mounted() {
    // Initialize previous volume and muted state
    this.previousVolume = this.masterVolume || 100;
    this.isMuted = this.masterVolume === 0;
  }
};
</script>

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

.song-progressBar {
  margin: 20px 0px 20px 0px;
}

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

.song-duration {
  float: right;

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

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

.playerController {
  display: flex;
  justify-content: center;

  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;
    transition: 0.5s box-shadow ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;

    &:first-child {
      margin-right: 20px;
    }

    &:last-child {
      margin-left: 20px;
    }

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

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

    &:active {
      background: $smg !important;
      color: $white;
    }
  }
}

.vumeter {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin-top: 55px;
  margin-left: -55px;
  border: 2px solid $smg;
  border-radius: 10px;
  transform: rotate(-90deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .vumeter-balance {
    width: 100%;

    & .progress-bar {
      transition-delay: 0.4s !important;
    }
  }
}

.control-button {
  margin: 0 10px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  i {
    font-size: 1.2em;
  }
}
</style>