<script type="text/x-template" id="cider-queue">
    <div class="queue-panel">
        <div class="row">
            <div class="col">
                <h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
            </div>
            <div class="col-auto flex-center">
                <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
            </div>
        </div>
        <div class="queue-body">
            <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
                <template v-for="(queueItem, position) in queueItems">
                    <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
                    <div class="cd-queue-item"
                         :class="{selected: selectedItems.includes(position)}"
                         @click="select($event, position)"
                         @dblclick="playQueueItem(position)" v-else :key="position"
                         @contextmenu="selected = position;queueContext($event, queueItem.item, position)">
                        <div class="row">
                            <div class="col-auto flex-center">
                                <div class="artwork">
                                    <mediaitem-artwork :url="queueItem.item.attributes.artwork ? queueItem.item.attributes.artwork.url : ''" :size="32"></mediaitem-artwork>
                                </div>
                            </div>
                            <div class="col queue-info">
                                <div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
                                <div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.albumName }} — {{ queueItem.item.attributes.artistName }}</div>
                            </div>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="queue-footer">
            <button class="md-btn" style="width:100%;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}</button>
        </div>
    </div>
</script>


<script>
    Vue.component('cider-queue', {
        template: '#cider-queue',
        data: function () {
            return {
                drag: false,
                queuePosition: 0,
                queueItems: [],
                selected: -1,
                selectedItems: [],
                app: this.$root
            }
        },
        mounted() {
            this.updateQueue()
        },
        methods: {
            select(e, position) {
                if(e.ctrlKey || e.shiftKey) {
                    if(this.selectedItems.indexOf(position) == -1) {
                        this.selectedItems.push(position)
                    } else {
                        this.selectedItems.splice(this.selectedItems.indexOf(position), 1)
                    }
                } else {
                    this.selectedItems = [position]
                }
            },
            queueContext(event, item, position) {
                let self = this
                let useMenu = "single"
                if(this.selectedItems.length > 1) {
                    useMenu = "multiple"
                }
                let menus = {
                    single: {
                        items: [{
                            "name": app.getLz('action.removeFromQueue'),
                            "action": function () {
                                self.queueItems.splice(position, 1)
                                app.mk.queue._queueItems = self.queueItems;
                                app.mk.queue._reindex()
                            }
                        },
                            {
                                "name": app.getLz('action.startRadio'),
                                "action": function () {
                                    app.mk.setStationQueue({
                                        song: item.attributes.playParams.id ?? item.id
                                    }).then(() => {
                                        app.mk.play()
                                    })
                                }
                            },
                        ]
                    },
                    multiple: {
                        items: [{
                            "name": app.getLz('action.removeTracks'),
                            "action": function () {
                                // add property to items to be removed
                                self.selectedItems.forEach(function (item) {
                                    self.queueItems[item].remove = true
                                })
                                // remove items
                                self.queueItems = self.queueItems.filter(function (item) {
                                    return !item.remove
                                })
                                app.mk.queue._reindex()
                                self.selectedItems = []
                            }
                        }]
                    }
                }
                app.showMenuPanel(menus[useMenu], event);
            },
            playQueueItem(index) {
                app.mk.changeToMediaAtIndex(index)
            },
            updateQueue() {
                this.selected = -1
                if (app.mk.queue) {
                    this.queuePosition = app.mk.queue.position;
                    this.queueItems = app.mk.queue._queueItems;
                } else {
                    this.queuePosition = 0;
                    this.queueItems = [];
                }
            },
            move() {
                this.selected = -1
                app.mk.queue._queueItems = this.queueItems;
                app.mk.queue._reindex()
            }
        }
    });
</script>