<template>
  <div :class="['ui', {'tiny': discrete}, 'buttons']">
    <button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'button']">
      <i class="ui play icon"></i>
      <template v-if="!discrete"><slot>Play</slot></template>
    </button>
    <div v-if="!discrete" class="ui floating dropdown icon button">
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item"@click="add"><i class="plus icon"></i> Add to queue</div>
        <div class="item"@click="addNext()"><i class="step forward icon"></i> Play next</div>
        <div class="item"@click="addNext(true)"><i class="arrow down icon"></i> Play now</div>
      </div>
    </div>
  </div>
</template>

<script>
import logger from '@/logging'
import jQuery from 'jquery'

export default {
  props: {
    // we can either have a single or multiple tracks to play when clicked
    tracks: {type: Array, required: false},
    track: {type: Object, required: false},
    discrete: {type: Boolean, default: false}
  },
  created () {
    if (!this.track & !this.tracks) {
      logger.default.error('You have to provide either a track or tracks property')
    }
  },
  mounted () {
    if (!this.discrete) {
      jQuery(this.$el).find('.ui.dropdown').dropdown()
    }
  },
  methods: {
    add () {
      if (this.track) {
        this.$store.dispatch('queue/append', {track: this.track})
      } else {
        this.$store.dispatch('queue/appendMany', {tracks: this.tracks})
      }
    },
    addNext (next) {
      if (this.track) {
        this.$store.dispatch('queue/append', {track: this.track, index: this.$store.state.queue.currentIndex + 1})
      } else {
        this.$store.dispatch('queue/appendMany', {tracks: this.tracks, index: this.$store.state.queue.currentIndex + 1})
      }
      if (next) {
        this.$store.dispatch('queue/next')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
  cursor: pointer;
}
</style>