var PLAYLISTS = [
    {
        Id: 'My New Smartplaylist',
        Name: 'My New Smartplaylist',
        Program: '(is-favourite)',
        SortProgram: '(begin *items*)',
        Playlists: [],
        Enabled: true,
    }
];
var USERS = [];

function fillForm(playlist, users) {
    const editName = document.querySelector('#SmartplaylistEditName');
    const editProgram = document.querySelector('#SmartplaylistEditProgram');
    const editSortProgram = document.querySelector('#SmartplaylistEditSortProgram');
    const editUsers = document.querySelector('#SmartplaylistEditUsers');
    const editEnabled = document.querySelector('#SmartplaylistEditEnabled');
    editName.value = playlist.Name;
    editProgram.value = playlist.Program;
    editSortProgram.value = playlist.SortProgram;
    editUsers.innerHTML = '';

    var added_users = []
    for (const p of playlist.Playlists) {
        var o = document.createElement('option');
        o.value = btoa(JSON.stringify(p));
        o.innerHTML = users.filter(u => u.Id == p.UserId).map(u => u.Name)[0];
        o.setAttribute('selected', 'selected');
        editUsers.appendChild(o);
        added_users.push(p.UserId);
    }
    for (const u of users) {
        if (added_users.includes(u.Id)) {
            continue;
        }
        var o = document.createElement('option');
        o.value = btoa(JSON.stringify({
            'PlaylistId': '00000000000000000000000000000000',
            'UserId': u.Id,
        }));
        o.innerHTML = u.Name;
        editUsers.appendChild(o);
    }
    editEnabled.checked = playlist.Enabled;
}

function fillPlaylistSelect(playlists) {
    const selection = document.querySelector('#SmartplaylistSelection');
    selection.innerHTML = '';
    var o = document.createElement('option');
    o.value = null;
    o.innerHTML = 'Create new playlist ...';
    selection.appendChild(o);
    for (const i of playlists.slice(1)) {
        var o = document.createElement('option');
        o.value = i.Id;
        o.innerHTML = i.Name;
        selection.appendChild(o);
    }
}

function jsonFromForm() {
        const editName = document.querySelector('#SmartplaylistEditName');
        const editProgram = document.querySelector('#SmartplaylistEditProgram');
        const editSortProgram = document.querySelector('#SmartplaylistEditSortProgram');
        const editUsers = document.querySelector('#SmartplaylistEditUsers');
        const editEnabled = document.querySelector('#SmartplaylistEditEnabled');
        return {
            Id: editName.value,
            Name: editName.value,
            Program: editProgram.value,
            SortProgram: editSortProgram.value,
            Playlists: Array.from(editUsers.options).filter((x) => x.selected).map(x => JSON.parse(atob(x.value))),
            Enabled: editEnabled.checked,
        };
}

ApiClient.getSmartPlaylists = function () {
    const url = ApiClient.getUrl('SmartPlaylist');
    return this.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
    });
}

ApiClient.setSmartPlaylist = function (p) {
    const url = ApiClient.getUrl('SmartPlaylist');
    return this.ajax({
        type: 'POST',
        url: url,
        dataType: 'json',
        contentType: 'application/json; charset=UTF-8',
        data: JSON.stringify(p),
    });
}

document.querySelector('#SmartPlaylistConfigPage')
    .addEventListener('viewshow', function() {
        Dashboard.showLoadingMsg();
        ApiClient.getSmartPlaylists().then(function (playlists) {
            PLAYLISTS = [PLAYLISTS[0]].concat(playlists);
            ApiClient.getUsers().then(function (users) {
                USERS = users;
                const selection = document.querySelector('#SmartplaylistSelection');
                fillPlaylistSelect(PLAYLISTS);
                fillForm(PLAYLISTS[selection.selectedIndex], USERS);
                Dashboard.hideLoadingMsg();
            });
        });
    });

document.querySelector('#SmartplaylistSelection')
    .addEventListener('change', function() {
        const selection = document.querySelector('#SmartplaylistSelection');
        fillForm(PLAYLISTS[selection.selectedIndex], USERS);
    });

document.querySelector('#SmartPlaylistConfigForm')
    .addEventListener('submit', function (e) {
        Dashboard.showLoadingMsg();
        const selection = document.querySelector('#SmartplaylistSelection');
        const selectedid = PLAYLISTS[selection.selectedIndex].Id;
        ApiClient.setSmartPlaylist(jsonFromForm()).then(function () {
            ApiClient.getSmartPlaylists().then(function (playlists) {
                PLAYLISTS = [PLAYLISTS[0]].concat(playlists);
                ApiClient.getUsers().then(function (users) {
                    USERS = users;
                    fillPlaylistSelect(PLAYLISTS);
                    const idx = PLAYLISTS.map(x => x.Id).indexOf(selectedid);
                    selection.selectedIndex = idx;
                    fillForm(PLAYLISTS[selection.selectedIndex], USERS);
                    Dashboard.hideLoadingMsg();
                });
            });
        });
        e.preventDefault();
    });