const selectAllCheckboxes = document.querySelector('#select-all');
const checkboxes = document.querySelectorAll('.checkbox');
const deleteBtn = document.querySelector('#delete');

selectAllCheckboxes.addEventListener('click', eventCheckBox);

/**
 * @description Event handler for select all checkbox
 */
function eventCheckBox () {

    if (selectAllCheckboxes.checked) {
        checkboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
    } else {
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    }
}

/**
 * @description Event handler for checkbox to enable/disable delete button
 */
function handleCheckboxChange() {
    let atLeastOneChecked = false;

    checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            atLeastOneChecked = true;
        }
    });

    deleteBtn.disabled = !atLeastOneChecked;
}

checkboxes.forEach((checkbox)=> {
    checkbox.addEventListener("change", handleCheckboxChange);
});

selectAllCheckboxes.addEventListener('click', handleCheckboxChange);