<template>
    <div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
        <slot name="title" :player="player" :item="item" :loaded="loaded">
            <span :class="['title is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
                {{ name || item.name }}
            </span>
        </slot>
        <div class="button-group actions">
            <a class="button action" v-if="hasAction('page')"
                    :href="item.data.page_url">
                <span class="icon is-small">
                    <i class="fa fa-external-link"></i>
                </span>
            </a>
            <a class="button action" v-if="item.data.is_downloadable"
                    :href="item.data.url" target="_blank">
                <span class="icon is-small">
                    <span class="fa fa-download"></span>
                </span>
            </a>
            <button :class="['button action', pinned ? 'selected' : 'not-selected']" v-if="player && player.sets.pin != $parent.set" @click.stop="player.togglePin(item)">
                <span class="icon is-small">
                    <span class="fa fa-star"></span>
                </span>
            </button>
            <slot name="actions" :player="player" :item="item" :loaded="loaded"></slot>
        </div>
        <slot name="extra-right" :player="player" :item="item" :loaded="loaded"></slot>
    </div>
</template>
<script>
import Model from '../model';
import Sound from '../sound';

export default {
    props: {
        data: {type: Object, default: () => {}},
        name: String,
        player: Object,
        page_url: String,
        actions: {type:Array, default: () => []},
        index: {type:Number, default: null},
    },

    computed: {
        item() { return this.data instanceof Model ? this.data : new Sound(this.data || {}); },
        loaded() { return this.player && this.player.isLoaded(this.item) },
        playing() { return this.player && this.player.isPlaying(this.item) },
        paused()  { return this.player && this.player.paused && this.loaded },
        pinned() { return this.player && this.player.sets.pin.find(this.item) },
    },

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