// not exactly vanilla as there is one lodash function
var allCheckboxes = document.querySelectorAll('.kw-project-filter');
var allArticles = Array.from(document.querySelectorAll('.article'));
var checked = {};


getChecked('category');
getChecked('range');
getChecked('target');
// getChecked('nbaTeam');
// getChecked('conference');

Array.prototype.forEach.call(allCheckboxes, function (el) {
    el.addEventListener('change', toggleCheckbox);
});

function toggleCheckbox(e) {
    getChecked(e.target.name);
    setVisibility();
}

function getChecked(name) {
    checked[name] = Array.from(document.querySelectorAll('input[name=' + name + ']:checked')).map(function (el) {
        return el.value;
    });
}

function setVisibility() {
    allArticles.map(function (el) {
        var category = checked.category.length ? _.intersection(Array.from(el.classList), checked.category).length : true;
        var range = checked.range.length ? _.intersection(Array.from(el.classList), checked.range).length : true;
        var target = checked.target.length ? _.intersection(Array.from(el.classList), checked.target).length : true;
    
        var all_checked = _.concat(checked.category, checked.range, checked.target);
        var contains_all = true;
    
        //Check if all selected classes are presents for each element
        for(var i = 0, j = all_checked.length; i < j; i++) {
            if(!el.classList.contains(all_checked[i])) {
                contains_all = false;
                break;
            }
        }
        if (contains_all) {
            el.style.display = 'block';
        } else {
            el.style.display = 'none';
        }
    });
}

function compareClasses(el_classList) {
    sum += item;
}