var COLLECTIONS = [
    {
        Id: 'My New Smartcollection',
        Name: 'My New Smartcollection',
        Program: '(is-favourite)',
        SortProgram: '(begin *items*)',
        CollectionId: '00000000000000000000000000000000',
        Enabled: true,
    }
];

function fillForm(collection) {
    const editName = document.querySelector('#SmartcollectionEditName');
    const editProgram = document.querySelector('#SmartcollectionEditProgram');
    const editSortProgram = document.querySelector('#SmartcollectionEditSortProgram');
    const editEnabled = document.querySelector('#SmartcollectionEditEnabled');
    editName.value = collection.Name;
    editProgram.value = collection.Program;
    editSortProgram.value = collection.SortProgram;
    editEnabled.checked = collection.Enabled;
}

function fillCollectionSelect(collections) {
    const selection = document.querySelector('#SmartcollectionSelection');
    selection.innerHTML = '';
    var o = document.createElement('option');
    o.value = null;
    o.innerHTML = 'Create new collection ...';
    selection.appendChild(o);
    for (const i of collections.slice(1)) {
        var o = document.createElement('option');
        o.value = i.Id;
        o.innerHTML = i.Name;
        selection.appendChild(o);
    }
}

function jsonFromForm(collectionId) {
    const editName = document.querySelector('#SmartcollectionEditName');
    const editProgram = document.querySelector('#SmartcollectionEditProgram');
    const editSortProgram = document.querySelector('#SmartcollectionEditSortProgram');
    const editEnabled = document.querySelector('#SmartcollectionEditEnabled');
    if (collectionId === null) {
        collectionId = '00000000000000000000000000000000'
    }
    return {
        Id: editName.value,
        Name: editName.value,
        Program: editProgram.value,
        SortProgram: editSortProgram.value,
        CollectionId: collectionId,
        Enabled: editEnabled.checked,
    };
}

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

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

document.querySelector('#SmartCollectionConfigPage')
    .addEventListener('viewshow', function() {
        Dashboard.showLoadingMsg();
        ApiClient.getSmartCollections().then(function (collections) {
            COLLECTIONS = [COLLECTIONS[0]].concat(collections);
            const selection = document.querySelector('#SmartcollectionSelection');
            fillCollectionSelect(COLLECTIONS);
            fillForm(COLLECTIONS[selection.selectedIndex]);
            Dashboard.hideLoadingMsg();
        });
    });

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

document.querySelector('#SmartCollectionConfigForm')
    .addEventListener('submit', function (e) {
        Dashboard.showLoadingMsg();
        const selection = document.querySelector('#SmartcollectionSelection');
        const selectedid = COLLECTIONS[selection.selectedIndex].Id;
        ApiClient.setSmartCollection(jsonFromForm(COLLECTIONS[selection.selectedIndex].CollectionId)).then(function () {
            ApiClient.getSmartCollections().then(function (collections) {
                COLLECTIONS = [COLLECTIONS[0]].concat(collections);
                fillCollectionSelect(COLLECTIONS);
                const idx = COLLECTIONS.map(x => x.Id).indexOf(selectedid);
                selection.selectedIndex = idx;
                fillForm(COLLECTIONS[selection.selectedIndex]);
                Dashboard.hideLoadingMsg();
            });
        });
        e.preventDefault();
    });