<template>
    <div class="a-playlist">
        <div class="header"><slot name="header"></slot></div>
        <ul :class="listClass">
            <li v-for="(item,index) in items" :class="[itemClass, player.isPlaying(item) ? 'is-active' : '']" @click="!hasAction('play') && select(index)"
                :key="index">
                <ASoundItem
                    :data="item" :index="index" :set="set" :player="player_"
                    @togglePlay="togglePlay(index)"
                    :actions="actions">
                    <template #after-title="bindings">
                        <slot name="after-title" v-bind="bindings"></slot>
                    </template>
                    <template #actions="bindings">
                        <slot name="actions" v-bind="bindings"></slot>
                        <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>
            </li>
        </ul>
        <slot name="footer"></slot>
    </div>
</template>
<script>
import AList from './AList';
import ASoundItem from './ASoundItem';

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

    props: {
        actions: Array,
        // FIXME: remove
        name: String,
        player: Object,
        editable: Boolean,
        withLink: 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>
