var COLLECTIONS = [
    {
        Id: 'My New Smartcollection',
        Name: 'My New Smartcollection',
        Program: 'nil',
        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),
    });
}
function initial_load(selectedId) {
    Dashboard.showLoadingMsg();
    ApiClient.getSmartCollections().then(function (collections) {
        COLLECTIONS = [COLLECTIONS[0]].concat(collections);
        const selection = document.querySelector('#SmartcollectionSelection');
        fillCollectionSelect(COLLECTIONS);
        if (selectedId === null) {
            selection.selectedIndex = 0;
        } else {
            selection.selectedIndex = COLLECTIONS.map(x => x.Id).indexOf(selectedId);
        }
        fillForm(COLLECTIONS[selection.selectedIndex]);
        Dashboard.hideLoadingMsg();
    });
}

export default function (view, params) {
    view.addEventListener('viewshow', function() {
        initial_load(null);
    });
    view.addEventListener('viewhide', function (_e) {});
    view.addEventListener('viewdestroy', function (_e) {});

    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 () {
                initial_load(selectedId);
            });
            e.preventDefault();
        });
}