<template>
    <div class="playlist">
        <slot name="header"></slot>
        <ul :class="listClass">
            <li v-for="(item,index) in items" :class="itemClass" @click="!hasAction('play') && select(index)"
                :key="index">
                <a :class="player.isPlaying(item) ? 'is-active' : ''">
                    <ASoundItem
                        :data="item" :index="index" :set="set" :player="player_"
                        @togglePlay="togglePlay(index)"
                        :actions="actions">
                        <template v-slot:extra-right="{}">
                            <button class="button" v-if="editable" @click.stop="remove(index,true)">
                                <span class="icon is-small"><span class="fa fa-close"></span></span>
                            </button>
                        </template>
                    </ASoundItem>
                </a>
            </li>
        </ul>
        <slot name="footer"></slot>
    </div>
</template>
<script>
import AList from './AList';
import ASoundItem from './ASoundItem';

export default {
    extends: AList,
    emits: [...AList.emits, 'remove'],
    components: { ASoundItem },

    props: {
        actions: Array,
        name: String,
        player: Object,
        editable: Boolean,
    },

    computed: {
        self() { return this; },
        player_() { return this.player || window.aircox.player },
    },

    methods: {
        hasAction(action) { return this.actions && this.actions.indexOf(action) != -1; },

        selectNext() {
            let index = this.selectedIndex + 1;
            return this.select(index >= this.items.length ? -1 : index);
        },

        togglePlay(index) {
            if(this.player_.isPlaying(this.set.get(index)))
                this.player_.pause();
            else
                this.select(index)
        },
    },
}
</script>
