Vue.component('music-mpd', {
    template: '#tmpl-music-mpd',
    props: ['config'],
    mixins: [utils],
    data: function() {
        return {
            track: {},
            status: {},
            timer: null,
            playlist: [],
            playlists: [],
            playlistFilter: '',
            browserFilter: '',
            playlistAddFilter: '',
            editorFilter: '',
            browserPath: [],
            browserItems: [],

            selectionMode: {
                playlist: false,
                browser: false,
                editor: false,
            },

            moveMode: {
                playlist: false,
                editor: false,
            },

            infoItem: {},
            modalVisible: {
                info: false,
                editor: false,
                playlistAdd: false,
            },

            addToPlaylistItems: [],
            selectedPlaylist: {},
            selectedPlaylistItems: {},
            selectedPlaylistAddItems: {},
            selectedEditorItems: {},
            selectedBrowserItems: {},

            syncTime: {
                timestamp: null,
                elapsed: null,
            },
        };
    },

    computed: {
        playlistDropdownItems: function() {
            var self = this;
            var items = [];

            if (Object.keys(this.selectedPlaylistItems).length === 1) {
                const track = Object.values(this.selectedPlaylistItems)[0];

                items.push({
                        text: 'Play',
                        icon: 'play',
                        click: async function() {
                            await self.playpos();
                            self.selectedPlaylistItems = {};
                        },
                    }
                );

                if (track.artist && track.artist.length) {
                    items.push({
                        text: 'View artist',
                        icon: 'user',
                        click: async function() {
                            await self.searchArtist(track);
                            self.selectedPlaylistItems = {};
                        }
                    });
                }

                if (track.album && track.album.length) {
                    items.push({
                        text: 'View album',
                        icon: 'compact-disc',
                        click: async function() {
                            await self.searchAlbum(track);
                            self.selectedPlaylistItems = {};
                        },
                    });
                }
            }

            items.push({
                text: 'Add to playlist',
                icon: 'list',
                click: async function() {
                    self.addToPlaylistItems = Object.values(self.selectedPlaylistItems).map(_ => _.file);
                    self.selectedPlaylistItems = {};
                    self.modalVisible.playlistAdd = true;
                    await self.listplaylists();
                },
            });

            if (Object.keys(this.selectedPlaylistItems).length < this.playlist.length) {
                items.push({
                    text: 'Move',
                    icon: 'retweet',
                    click: function() {
                        self.moveMode.playlist = true;
                    },
                });
            }

            items.push({
                text: 'Remove from queue',
                icon: 'trash',
                click: async function() {
                    await self.del();
                    self.selectedPlaylistItems = {};
                },
            });

            if (Object.keys(this.selectedPlaylistItems).length === 1) {
                items.push({
                    text: 'View track info',
                    icon: 'info',
                    click: async function() {
                        await self.info(Object.values(self.selectedPlaylistItems)[0]);
                    },
                });
            }

            return items;
        },

        browserDropdownItems: function() {
            var self = this;
            var items = [];

            if (Object.keys(this.selectedBrowserItems).length === 1 &&
                    Object.values(this.selectedBrowserItems)[0].type === 'directory') {
                items.push({
                    text: 'Open',
                    icon: 'folder',
                    click: async function() {
                        await self.cd();
                        self.selectedBrowserItems = {};
                    },
                });
            }

            if (Object.keys(this.selectedBrowserItems).length === 1) {
                const item = Object.values(this.selectedBrowserItems)[0];

                items.push(
                    {
                        text: 'Play',
                        icon: 'play',
                        click: async function() {
                            const item = Object.values(self.selectedBrowserItems)[0];
                            var promise;

                            switch (item.type) {
                                case 'playlist':
                                    promise = self.load(item.name);
                                    break;
                                case 'file':
                                    promise = self.add(item.name, position=0);
                                    break;
                                case 'directory':
                                    promise = self.add(item.name);
                                    break;
                                default:
                                    console.warning('Unable to handle type: ' + item.type);
                                    break;
                            }

                            await promise;
                            await self.playpos(0);
                            self.selectedBrowserItems = {};
                        },
                    },
                    {
                        text: 'Replace and play',
                        icon: 'play',
                        click: async function() {
                            await self.clear();

                            const item = Object.values(self.selectedBrowserItems)[0];
                            var promise;

                            switch (item.type) {
                                case 'playlist':
                                    promise = self.load(item.name);
                                    break;
                                case 'file':
                                    promise = self.add(item.name, position=0);
                                    break;
                                case 'directory':
                                    promise = self.add(item.name);
                                    break;
                                default:
                                    console.warning('Unable to handle type: ' + item.type);
                                    break;
                            }

                            await promise;
                            await self.playpos(0);
                            self.selectedBrowserItems = {};
                        },
                    }
                );

                if (item.artist && item.artist.length) {
                    items.push({
                        text: 'View artist',
                        icon: 'user',
                        click: async function() {
                            await self.searchArtist(item);
                            self.selectedBrowserItems = {};
                        }
                    });
                }

                if (item.album && item.album.length) {
                    items.push({
                        text: 'View album',
                        icon: 'compact-disc',
                        click: async function() {
                            await self.searchAlbum(item);
                            self.selectedBrowserItems = {};
                        },
                    });
                }
            }

            items.push(
                {
                    text: 'Add to queue',
                    icon: 'plus',
                    click: async function() {
                        const items = Object.values(self.selectedBrowserItems);
                        const promises = items.map(item => item.type === 'playlist' ? self.load(item.name) : self.add(item.name));

                        await Promise.all(promises);
                        self.selectedBrowserItems = {};
                    },
                },
            );

            if (Object.values(this.selectedBrowserItems).filter(_ => _.type === 'file').length === Object.values(this.selectedBrowserItems).length) {
                items.push(
                    {
                        text: 'Add to playlist',
                        icon: 'list',
                        click: async function() {
                            self.addToPlaylistItems = Object.keys(self.selectedBrowserItems);
                            self.modalVisible.playlistAdd = true;
                            await self.listplaylists();
                            self.selectedBrowserItems = {};
                        },
                    },
                );
            }

            if (Object.keys(this.selectedBrowserItems).length === 1
                    && Object.values(this.selectedBrowserItems)[0].type === 'playlist') {
                items.push({
                    text: 'Edit',
                    icon: 'pen',
                    click: async function() {
                        const item = Object.values(self.selectedBrowserItems)[0];
                        self.selectedPlaylist.name = item.name;
                        await self.refreshSelectedPlaylist();
                        self.modalVisible.editor = true;
                        self.selectedBrowserItems = {};
                    },
                });
            }

            if (Object.values(this.selectedBrowserItems).filter(item => item.type === 'playlist').length === Object.values(this.selectedBrowserItems).length) {
                items.push({
                    text: 'Remove',
                    icon: 'trash',
                    click: async function() {
                        if (!confirm('Are you sure you want to remove the selected playlist' +
                                (Object.values(self.selectedBrowserItems).length > 1 ? 's' : '') + '?')) {
                            return;
                        }

                        const items = Object.values(self.selectedBrowserItems);
                        await self.rm(items);
                        self.selectedBrowserItems = {};
                    },
                });
            }

            if (Object.keys(this.selectedBrowserItems).length === 1
                    && Object.values(this.selectedBrowserItems)[0].type === 'file') {
                items.push({
                    text: 'View info',
                    icon: 'info',
                    click: async function() {
                        await self.info(Object.values(self.selectedBrowserItems)[0].name);
                    },
                });
            }

            return items;
        },

        editorDropdownItems: function() {
            var self = this;
            var items = [];

            if (Object.keys(this.selectedEditorItems).length === 1) {
                const item = Object.values(this.selectedEditorItems)[0];

                items.push(
                    {
                        text: 'Play',
                        icon: 'play',
                        click: async function() {
                            await self.add(item.file, position=0);
                            await self.playpos(0);
                            self.selectedEditorItems = {};
                        },
                    },
                    {
                        text: 'Replace and play',
                        icon: 'play',
                        click: async function() {
                            await self.clear();
                            await self.add(item.file, position=0);
                            await self.playpos(0);
                            self.selectedEditorItems = {};
                        },
                    }
                );

                if (item.artist && item.artist.length) {
                    items.push({
                        text: 'View artist',
                        icon: 'user',
                        click: async function() {
                            await self.searchArtist(item);
                            self.selectedEditorItems = {};
                        }
                    });
                }

                if (item.album && item.album.length) {
                    items.push({
                        text: 'View album',
                        icon: 'compact-disc',
                        click: async function() {
                            await self.searchAlbum(item);
                            self.selectedEditorItems = {};
                        },
                    });
                }
            }

            items.push(
                {
                    text: 'Add to queue',
                    icon: 'plus',
                    click: async function() {
                        const items = Object.values(self.selectedEditorItems);
                        const promises = items.map(item => self.add(item.file));

                        await Promise.all(promises);
                        self.selectedEditorItems = {};
                    },
                },
                {
                    text: 'Add to playlist',
                    icon: 'list',
                    click: async function() {
                        self.addToPlaylistItems = Object.keys(self.selectedEditorItems);
                        self.modalVisible.playlistAdd = true;
                        await self.listplaylists();
                        self.selectedEditorItems = {};
                    },
                }
            );

            if (Object.keys(this.selectedEditorItems).length < this.selectedPlaylist.items.length) {
                items.push({
                    text: 'Move',
                    icon: 'retweet',
                    click: function() {
                        self.moveMode.editor = true;
                    },
                });
            }

            items.push(
                {
                    text: 'Remove',
                    icon: 'trash',
                    click: async function() {
                        if (!confirm('Are you sure you want to remove the selected track' +
                                (Object.values(self.selectedEditorItems).length > 1 ? 's' : '') + ' from the playlist?')) {
                            return;
                        }

                        const items = Object.values(self.selectedEditorItems);
                        await self.playlistdelete(items.map(_ => _.pos));
                        self.selectedEditorItems = {};
                    },
                }
            );

            if (Object.keys(this.selectedEditorItems).length === 1) {
                const item = Object.values(self.selectedEditorItems)[0];

                items.push({
                    text: 'View info',
                    icon: 'info',
                    click: async function() {
                        await self.info(item.file);
                    },
                });
            }

            return items;
        },
    },

    methods: {
        refresh: async function() {
            const getStatus = request('music.mpd.status');
            const getTrack = request('music.mpd.currentsong');
            const getPlaylist = request('music.mpd.playlistinfo');
            const getBrowserItems = request('music.mpd.lsinfo');

            let [status, track, playlist, browserItems] = await Promise.all([getStatus, getTrack, getPlaylist, getBrowserItems]);

            this._parseStatus(status);
            this._parseTrack(track);
            this._parsePlaylist(playlist);
            this._parseBrowserItems(browserItems);

            if (this.status.state === 'play') {
                this.startTimer();
            }
        },

        // Hack-ish workaround to get the browser and playlist panels to keep their height
        // in sync with the nav and control bars, as both those elements are fixed.
        adjustLayout: function() {
            const adjust = (self) => {
                const nav = document.querySelector('nav');
                const panels = document.querySelectorAll('.music-mpd-container .panels .panel');
                const controls = document.querySelector('.music-mpd-container .controls');

                return () => {
                    const panelHeight = window.innerHeight - nav.clientHeight - controls.clientHeight - 5;
                    if (panelHeight >= 0) {
                        for (const panel of panels) {
                            if (panelHeight != parseFloat(panel.style.height)) {
                                panel.style.height = panelHeight + 'px';
                            }
                        }
                    }
                }
            };
        },

        _parseStatus: async function(status) {
            if (!status || status.length === 0) {
                status = await request('music.mpd.status');
            }

            for (const [attr, value] of Object.entries(status)) {
                if (['consume','random','repeat','single','bitrate'].indexOf(attr) >= 0) {
                    Vue.set(this.status, attr, !!parseInt(value));
                } else if (['nextsong','nextsongid','playlist','playlistlength',
                            'volume','xfade','song','songid'].indexOf(attr) >= 0) {
                    Vue.set(this.status, attr, parseInt(value));
                } else if (['elapsed'].indexOf(attr) >= 0) {
                    Vue.set(this.status, attr, parseFloat(value));
                } else {
                    Vue.set(this.status, attr, value);
                }
            }
        },

        _parseTrack: async function(track) {
            if (!track || track.length === 0) {
                track = await request('music.mpd.currentsong');
            }

            for (const [attr, value] of Object.entries(track)) {
                if (['id','pos','time','track','disc'].indexOf(attr) >= 0) {
                    Vue.set(this.track, attr, parseInt(value));
                } else {
                    Vue.set(this.track, attr, value);
                }
            }
        },

        _parsePlaylist: function(playlist) {
            if (!playlist || playlist.length === 0) {
                return;
            }

            this.playlist = [];

            for (var track of playlist) {
                for (const [attr, value] of Object.entries(track)) {
                    if (['time','pos','id','track','disc'].indexOf(attr) >= 0) {
                        track[attr] = parseInt(value);
                    } else {
                        track[attr] = value;
                    }
                }

                this.playlist.push(track);
            }
        },

        _parseBrowserItems: function(browserItems) {
            if (!browserItems || browserItems.length === 0) {
                return;
            }

            this.browserItems = [];

            for (var item of browserItems) {
                if (item.directory) {
                    this.browserItems.push({
                        id: 'directory:' + item.directory,
                        type: 'directory',
                        name: item.directory,
                    });
                } else if (item.playlist) {
                    this.browserItems.push({
                        id: 'playlist:' + item.playlist,
                        type: 'playlist',
                        name: item.playlist,
                        'last-modified': item['last-modified'],
                    });
                } else if (item.file) {
                    this.browserItems.push({
                        id: item.file,
                        type: 'file',
                        name: item.file,
                        ...item,
                    });
                }
            }
        },

        previous: async function() {
            await request('music.mpd.previous');
            let track = await request('music.mpd.currentsong');
            this.onNewPlayingTrack({track: track});
        },

        repeat: async function() {
            await request('music.mpd.repeat');
            let status = await request('music.mpd.status');
            this._parseStatus(status);
        },

        consume: async function() {
            await request('music.mpd.consume');
            let status = await request('music.mpd.status');
            this._parseStatus(status);
        },

        single: async function() {
            await request('music.mpd.single');
            let status = await request('music.mpd.status');
            this._parseStatus(status);
        },

        playPause: async function() {
            await request('music.mpd.pause');
            let status = await request('music.mpd.status');
            const method = status.state === 'play' ? this.onMusicPlay : this.onMusicPause;
            method({ status: status });
        },

        playpos: async function(pos) {
            if (pos == null) {
                if (!Object.keys(this.selectedPlaylistItems).length) {
                    return;
                }

                pos = Object.keys(this.selectedPlaylistItems)[0];
            }

            let status = await request('music.mpd.play_pos', {pos: pos});
            this._parseStatus(status);

            let track = await request('music.mpd.currentsong');
            this._parseTrack(track);
        },

        stop: async function() {
            await request('music.mpd.stop');
            this.onMusicStop({});
        },

        random: async function() {
            await request('music.mpd.random');
            let status = await request('music.mpd.status');
            this._parseStatus(status);
        },

        next: async function() {
            await request('music.mpd.next');
            let track = await request('music.mpd.currentsong');
            this.onNewPlayingTrack({track: track});
        },

        seek: async function(event) {
            var value;

            if (event.target) {
                value = parseFloat(event.target.value);
            } else if (event.value) {
                value = parseFloat(event.value);
            } else {
                value = parseFloat(event);
            }

            const status = await request('music.mpd.seekcur', {value: value});
            this.onSeekChange({status: status});
        },

        volume: async function(event) {
            var value;

            if (event.target) {
                value = parseFloat(event.target.value);
            } else if (event.value) {
                value = parseFloat(event.value);
            } else {
                value = parseFloat(event);
            }

            const status = await request('music.mpd.setvol', {vol: value});
            this.onVolumeChange({status: status});
        },

        clear: async function() {
            if (!confirm('Are you sure that you want to clear the playlist?')) {
                return;
            }

            await request('music.mpd.clear');
            this.stopTimer();
            this.track = {};
            this.playlist = [];

            let status = await request('music.mpd.status');
            this._parseStatus(status);
        },

        add: async function(resource, position=null) {
            var args = {resource: resource};
            if (position != null) {
                args.position = position;
            }

            let status = await request('music.mpd.add', args);
            this._parseStatus(status);

            let playlist = await request('music.mpd.playlistinfo');
            this._parsePlaylist(playlist);
        },

        load: async function(item, play=false) {
            await request('music.mpd.load', {playlist:item, play:play});
            let playlist = await request('music.mpd.playlistinfo');
            this._parsePlaylist(playlist);
        },

        del: async function() {
            const positions = Object.keys(this.selectedPlaylistItems);
            if (!positions.length) {
                return;
            }

            let status = await request('music.mpd.delete', {'positions': positions});
            this._parseStatus(status);

            for (const pos in positions) {
                Vue.delete(this.selectedPlaylistItems, pos);
            }
        },

        rm: async function(items) {
            if (!items) {
                items = Object.values(this.selectedBrowserItems);
            }

            if (!items.length) {
                return;
            }

            let status = await request('music.mpd.rm', {playlist: items.map(_ => _.name)});
            this._parseStatus(status);

            items = await request('music.mpd.lsinfo', {uri: this.browserPath.join('/')});
            this._parseBrowserItems(items);
        },

        move: async function(fromPos, toPos, updateChanges=true) {
            let status = await request('music.mpd.move', {from_pos: fromPos, to_pos: toPos});

            if (updateChanges) {
                this._parseStatus(status);
                const playlist = await request('music.mpd.playlistinfo');
                this._parsePlaylist(playlist);
            }
        },

        playlistmove: async function(fromPos, toPos) {
            if (!this.selectedPlaylist.name) {
                return;
            }

            await request('music.mpd.playlistmove', {name: this.selectedPlaylist.name, from_pos: fromPos, to_pos: toPos});
        },

        swap: async function() {
            if (Object.keys(this.selectedPlaylistItems).length !== 2) {
                return;
            }

            const positions = Object.keys(this.selectedPlaylistItems).sort();
            await request('music.mpd.move', {from_pos: positions[1], to_pos: positions[0]});

            let status = await request('music.mpd.move', {from_pos: positions[0]+1, to_pos: positions[1]});
            this._parseStatus(status);

            const playlist = await request('music.mpd.playlistinfo');
            this._parsePlaylist(playlist);
        },

        cd: async function() {
            const item = Object.values(this.selectedBrowserItems)[0];

            if (item.name === '..') {
                if (this.browserPath.length) {
                    this.browserPath.pop();
                }
            } else {
                this.browserPath = item.name.split('/');
            }

            const items = await request('music.mpd.lsinfo', {uri: this.browserPath.join('/')});
            this._parseBrowserItems(items);
        },

        info: async function(item) {
            var info = item;

            if (typeof(item) === 'string') {
                var items = await request('music.mpd.search', {filter: ['file', info]});
                item = items.length ? items[0] : {file: info};
            }

            this.infoItem = item;
            this.modalVisible.info = true;
        },

        searchArtist: async function(item) {
            await this.search({artist: item.artist});
        },

        searchAlbum: async function(item) {
            var query = {};

            if (item['x-albumuri']) {
                query.file = item['x-albumuri'];
            } else {
                query.artist = item.albumartist || item.artist;
                query.album = item.album;
            }

            await this.search(query);
        },

        search: async function(query) {
            this.$refs.search.resetQuery();
            this.$refs.search.query = query;
            this.$refs.search.visible = true;
            await this.$refs.search.search();
        },

        listplaylists: async function() {
            this.playlists = [];
            let playlists = await request('music.mpd.listplaylists');

            for (const p of playlists) {
                this.playlists.push(p);
            }
        },

        listplaylist: async function(name) {
            return await request('music.mpd.listplaylist', {name: name});
        },

        listplaylistinfo: async function(name) {
            return await request('music.mpd.listplaylistinfo', {name: name});
        },

        playlistadd: async function(items=[], playlists=[]) {
            if (!playlists.length) {
                if (this.modalVisible.playlistAdd) {
                    playlists = Object.keys(this.selectedPlaylistAddItems);
                }
            }

            if (!items.length) {
                items = this.addToPlaylistItems;
            }

            if (!items.length || !playlists.length) {
                return;
            }

            var promises = [];
            for (const playlist of playlists) {
                promises.push(request('music.mpd.playlistadd', {
                    name: playlist, uri: items.map(_ => typeof(_) === 'object' ? _.file : _)
                }));
            }

            await Promise.all(promises);
            this.modalVisible.playlistAdd = false;
            this.addToPlaylistItems = [];
        },

        playlistdelete: async function(items=[]) {
            if (!items.length) {
                items = Object.keys(this.selectedEditorItems);
            }

            if (!items.length || !this.selectedPlaylist.name) {
                return;
            }

            await request('music.mpd.playlistdelete', {name: this.selectedPlaylist.name, pos: items});
            await this.refreshSelectedPlaylist();
        },

        playlistclear: async function() {
            if (!confirm('Are you sure that you want to clear this playlist? This operation is NOT REVERSIBLE')) {
                return;
            }

            await request('music.mpd.playlistclear', {name: this.selectedPlaylist.name});
            await this.refreshSelectedPlaylist();
        },

        rename: async function() {
            if (!this.selectedPlaylist.name) {
                return;
            }

            var newName = prompt('New name for the playlist', this.selectedPlaylist.name);
            if (!newName.length) {
                return;
            }

            await request('music.mpd.rename', {name: this.selectedPlaylist.name, new_name: newName});
            await this.listplaylists();

            for (var item of this.browserItems) {
                if (item.type === 'playlist' && item.name === this.selectedPlaylist.name) {
                    item.name = newName;
                }
            }

            this.selectedPlaylist.name = newName;
        },

        onNewPlayingTrack: async function(event) {
            var previousTrack = {
                file: this.track.file,
                artist: this.track.artist,
                title: this.track.title,
            };

            this.status.state = 'play';
            Vue.set(this.status, 'elapsed', 0);
            this.track = {};
            this._parseTrack(event.track);

            let status = event.status ? event.status : await request('music.mpd.status');
            this._parseStatus(status);
            this.startTimer();

            if (this.track.file != previousTrack.file
                    || this.track.artist != previousTrack.artist
                    || this.track.title != previousTrack.title) {
                this.showNewTrackNotification();

                const self = this;
                setTimeout(function() {
                    self.scrollToActiveTrack();
                }, 100);
            }
        },

        showNewTrackNotification: function() {
            createNotification({
                html: '<b>' + (this.track.artist || '[No Artist]') + '</b><br>' +
                      (this.track.title || '[No Title]'),
                image: {
                    icon: 'play',
                }
            });
        },

        onMusicStop: function(event) {
            this.status.state = 'stop';
            Vue.set(this.status, 'elapsed', 0);
            this._parseStatus(event.status);
            this._parseTrack(event.track);
            this.stopTimer();
        },

        onMusicPlay: function(event) {
            this.status.state = 'play';
            this._parseStatus(event.status);
            this._parseTrack(event.track);
            this.startTimer();
        },

        onMusicPause: function(event) {
            this.status.state = 'pause';
            this._parseStatus(event.status);
            this._parseTrack(event.track);

            Vue.set(this.syncTime, 'timestamp', new Date());
            Vue.set(this.syncTime, 'elapsed', this.status.elapsed);
        },

        onSeekChange: function(event) {
            if (event.position != null)
                Vue.set(this.status, 'elapsed', parseFloat(event.position));
            if (event.status)
                this._parseStatus(event.status);
            if (event.track)
                this._parseTrack(event.track);

            Vue.set(this.syncTime, 'timestamp', new Date());
            Vue.set(this.syncTime, 'elapsed', this.status.elapsed);
        },

        onPlaylistChange: async function(event) {
            if (event.changes) {
                this.playlist = event.changes;
            } else {
                const playlist = await request('music.mpd.playlistinfo');
                this._parsePlaylist(playlist);
            }
        },

        onVolumeChange: function(event) {
            if (event.volume != null)
                this.status.volume = parseFloat(event.volume);
            if (event.status)
                this._parseStatus(event.status);
            if (event.track)
                this._parseTrack(event.track);
        },

        onRepeatChange: function(event) {
            this.status.repeat = event.state;
        },

        onRandomChange: function(event) {
            this.status.random = event.state;
        },

        onConsumeChange: function(event) {
            this.status.consume = event.state;
        },

        onSingleChange: function(event) {
            this.status.single = event.state;
        },

        startTimer: function() {
            if (this.timer != null) {
                this.stopTimer();
            }

            Vue.set(this.syncTime, 'timestamp', new Date());
            Vue.set(this.syncTime, 'elapsed', this.status.elapsed);
            this.timer = setInterval(this.timerFunc, 1000);
        },

        stopTimer: function() {
            if (this.timer == null) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },

        timerFunc: function() {
            if (this.status.state !== 'play' || this.status.elapsed == null) {
                return;
            }

            Vue.set(this.status, 'elapsed', this.syncTime.elapsed +
                ((new Date()).getTime()/1000) - (this.syncTime.timestamp.getTime()/1000));
        },

        matchesPlaylistFilter: function(track) {
            if (this.playlistFilter.length === 0)
                return true;

            const filter = this.playlistFilter.split(' ').filter(_ => _.length > 0).map(_ => _.toLocaleLowerCase()).join(' ');
            return [track.artist || '', track.title || '', track.album || ''].join(' ').toLocaleLowerCase().indexOf(filter) >= 0;
        },

        matchesEditorFilter: function(track) {
            if (this.editorFilter.length === 0)
                return true;

            const filter = this.editorFilter.split(' ').filter(_ => _.length > 0).map(_ => _.toLocaleLowerCase()).join(' ');
            return [track.artist || '', track.title || '', track.album || ''].join(' ').toLocaleLowerCase().indexOf(filter) >= 0;
        },

        matchesBrowserFilter: function(item) {
            if (this.browserFilter.length === 0)
                return true;

            const filter = this.browserFilter.toLocaleLowerCase().split(' ').filter(_ => _.length > 0).join(' ');
            return (item.artist || '').concat(item.name).toLocaleLowerCase().indexOf(filter) >= 0;
        },

        matchesPlaylistAddFilter: function(item) {
            if (this.playlistAddFilter.length === 0)
                return true;

            const filter = this.playlistAddFilter.toLocaleLowerCase().split(' ').filter(_ => _.length > 0).join(' ');
            return (item.playlist || '').toLocaleLowerCase().indexOf(filter) >= 0;
        },

        onPlaylistItemClick: async function(track) {
            if (this.selectionMode.playlist) {
                if (track.pos in this.selectedPlaylistItems) {
                    Vue.delete(this.selectedPlaylistItems, track.pos);
                } else {
                    Vue.set(this.selectedPlaylistItems, track.pos, track);
                }
            } else if (this.moveMode.playlist) {
                var fromPos = Object.values(this.selectedPlaylistItems).map(_ => _.pos);
                var toPos = track.pos;
                this.moveMode.playlist = false;

                const promises = fromPos.map((pos,i) => this.move(pos, toPos+i, false));
                await Promise.all(promises);
                this.selectedPlaylistItems = {};

                const playlist = await request('music.mpd.playlistinfo');
                this._parsePlaylist(playlist);
            } else if (track.pos in this.selectedPlaylistItems) {
                Vue.delete(this.selectedPlaylistItems, track.pos);
            } else {
                this.selectedPlaylistItems = {};
                Vue.set(this.selectedPlaylistItems, track.pos, track);
                openDropdown(this.$refs.playlistDropdown.$el);
            }
        },

        onEditorItemClick: async function(track) {
            if (this.selectionMode.editor) {
                if (track.pos in this.selectedEditorItems) {
                    Vue.delete(this.selectedEditorItems, track.pos);
                } else {
                    Vue.set(this.selectedEditorItems, track.pos, track);
                }
            } else if (this.moveMode.editor) {
                var fromPos = Object.values(this.selectedEditorItems).map(_ => _.pos);
                var toPos = track.pos;
                this.moveMode.editor = false;

                const promises = fromPos.map((pos,i) => this.playlistmove(pos, toPos+i));
                await Promise.all(promises);
                await this.refreshSelectedPlaylist();
            } else if (track.pos in this.selectedEditorItems) {
                Vue.delete(this.selectedEditorItems, track.pos);
            } else {
                this.selectedEditorItems = {};
                Vue.set(this.selectedEditorItems, track.pos, track);
                openDropdown(this.$refs.editorDropdown.$el);
            }
        },

        onBrowserItemClick: function(item) {
            if (item.type === 'directory' && item.name === '..') {
                this.selectedBrowserItems = {};
                this.selectedBrowserItems[item.id] = item;
                this.cd();
                this.selectedBrowserItems = {};
                return;
            }

            if (this.selectionMode.browser) {
                if (item.id in this.selectedBrowserItems) {
                    Vue.delete(this.selectedBrowserItems, item.id);
                } else {
                    Vue.set(this.selectedBrowserItems, item.id, item);
                }
            } else if (item.id in this.selectedBrowserItems) {
                Vue.delete(this.selectedBrowserItems, item.id);
            } else {
                this.selectedBrowserItems = {};
                Vue.set(this.selectedBrowserItems, item.id, item);
                openDropdown(this.$refs.browserDropdown.$el);
            }
        },

        onPlaylistAddItemClick: function(playlist) {
            if (playlist.playlist in this.selectedPlaylistAddItems) {
                Vue.delete(this.selectedPlaylistAddItems, playlist.playlist);
            } else {
                Vue.set(this.selectedPlaylistAddItems, playlist.playlist, playlist);
            }
        },

        togglePlaylistSelectionMode: function() {
            if (this.selectionMode.playlist && Object.keys(this.selectedPlaylistItems).length) {
                openDropdown(this.$refs.playlistDropdown.$el);
            }

            this.selectionMode.playlist = !this.selectionMode.playlist;
        },

        playlistSelectAll: function() {
            this.selectedPlaylistItems = {};
            this.selectionMode.playlist = true;

            for (var track of this.playlist) {
                this.selectedPlaylistItems[track.pos] = track;
            }

            openDropdown(this.$refs.playlistDropdown.$el);
        },

        toggleBrowserSelectionMode: function() {
            if (this.selectionMode.browser && Object.keys(this.selectedBrowserItems).length) {
                openDropdown(this.$refs.browserDropdown.$el);
            }

            this.selectionMode.browser = !this.selectionMode.browser;
        },

        toggleEditorSelectionMode: function() {
            if (this.selectionMode.editor && Object.keys(this.selectedEditorItems).length) {
                openDropdown(this.$refs.editorDropdown.$el);
            }

            this.selectionMode.editor = !this.selectionMode.editor;
        },

        browserSelectAll: function() {
            this.selectedBrowserItems = {};
            this.selectionMode.browser = true;

            for (var item of this.browserItems) {
                if (item.type !== 'directory' && item.name !== '..') {
                    this.selectedBrowserItems[item.id] = item;
                }
            }

            openDropdown(this.$refs.browserDropdown.$el);
        },

        editorSelectAll: function() {
            this.selectedEditorItems = {};
            this.selectionMode.editor = true;

            for (var item of this.selectedPlaylist.items) {
                Vue.set(this.selectedEditorItems, item.pos, item);
            }

            openDropdown(this.$refs.editorDropdown.$el);
        },

        scrollToActiveTrack: function() {
            if (this.$refs.activePlaylistTrack && this.$refs.activePlaylistTrack.length) {
                this.$refs.activePlaylistTrack[0].$el.scrollIntoView({behavior: 'smooth'});
            } else {
                return;
            }
        },

        addToPlaylistPrompt: async function() {
            var resource = prompt('Path or URI of the resource to add');
            if (!resource.length) {
                return;
            }

            await this.add(resource);
        },

        addToPlaylistEditorPrompt: async function() {
            var resource = prompt('Path or URI of the resource to add');
            if (!resource.length) {
                return;
            }

            await request('music.mpd.playlistadd', {name: this.selectedPlaylist.name, uri: resource});
            await this.refreshSelectedPlaylist();
        },

        savePlaylistPrompt: async function() {
            var name = prompt('Playlist name');
            if (!name.length) {
                return;
            }

            let status = await request('music.mpd.save', {name: name});
            this._parseStatus(status);

            let items = await request('music.mpd.lsinfo', {uri: this.browserPath.join('/')});
            this._parseBrowserItems(items);
        },

        refreshSelectedPlaylist: async function() {
            if (!this.selectedPlaylist.name) {
                return;
            }

            let items = (await this.listplaylistinfo(this.selectedPlaylist.name)).map((_, i) => {
                return { ..._, pos: i }
            });

            Vue.set(this.selectedPlaylist, 'items', items);
        },
    },

    created: function() {
        this.refresh();
        registerEventHandler(this.onNewPlayingTrack, 'platypush.message.event.music.NewPlayingTrackEvent');
        registerEventHandler(this.onMusicStop, 'platypush.message.event.music.MusicStopEvent');
        registerEventHandler(this.onMusicPlay, 'platypush.message.event.music.MusicPlayEvent');
        registerEventHandler(this.onMusicPause, 'platypush.message.event.music.MusicPauseEvent');
        registerEventHandler(this.onSeekChange, 'platypush.message.event.music.SeekChangeEvent');
        registerEventHandler(this.onPlaylistChange, 'platypush.message.event.music.PlaylistChangeEvent');
        registerEventHandler(this.onVolumeChange, 'platypush.message.event.music.VolumeChangeEvent');
        registerEventHandler(this.onRepeatChange, 'platypush.message.event.music.PlaybackRepeatModeChangeEvent');
        registerEventHandler(this.onRandomChange, 'platypush.message.event.music.PlaybackRandomModeChangeEvent');
        registerEventHandler(this.onConsumeChange, 'platypush.message.event.music.PlaybackConsumeModeChangeEvent');
        registerEventHandler(this.onSingleChange, 'platypush.message.event.music.PlaybackSingleModeChangeEvent');
    },

    mounted: function() {
        this.adjustLayout();
        this.scrollToActiveTrack();
    },
});