import { selectId, pushStyles, selectTag, addClasslist } from './helperFunctions';

$(function() {
    function toggleVisibility(selector, condition) {
        $(selector).toggle(condition);
    }

    function updateDarkMode() {
        const isChecked = $("#darkModeCheckbox").is(":checked");
        const body = selectTag('body');
        if (isChecked) {
            addClasslist(body, 'dark-mode');
        } else {
            body.classList.remove('dark-mode');
        }
    }

    function openClrModal() {
        pushStyles(selectId('clr-data-model'), { display: 'flex' });
    }

    function closeClrModal() {
        pushStyles(selectId('clr-data-model'), { display: 'none' });
    }

    function handleClrModalClick(event) {
        const target = event.target;
        if (target.classList.contains('cancel-btn')) {
            closeClrModal();
        } else if (target.tagName === 'BUTTON' && target.textContent === 'Yes') {
            localStorage.clear();
            location.reload();
        }
    }

    function handleSearchBarKeyup() {
        const query = $('#search-bar').val().toLowerCase();
        $('.filter-button').each(function() {
            toggleVisibility(this, $(this).text().toLowerCase().indexOf(query) > -1);
        });
    }

    function updateShowModded() {
        toggleVisibility("#moddedButtons", $("#showModded").is(":checked"));
    }

    $("#darkModeCheckbox").on("change", updateDarkMode);
    updateDarkMode();

    selectId('clr-data-model').addEventListener('click', handleClrModalClick);

    $('#search-bar').on('keyup', handleSearchBarKeyup);

    $("#showModded").on("change", updateShowModded);
    updateShowModded();
});