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

$(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 filterButtons = $('.filter-button').map(function() {
            return { element: this, text: $(this).text() };
        }).get();
        const fuse = new Fuse(filterButtons, {
            keys: ['text'],
            threshold: 0.3
        });
        const query = $('#search-bar').val().toLowerCase();

        if (query === '') {
            // Show all buttons if the search query is empty
            $('.filter-button').each(function() {
                toggleVisibility(this, true);
            });
        } else {
            const results = fuse.search(query);
            
            $('.filter-button').each(function() {
                toggleVisibility(this, false);
            });

            results.forEach(result => {
                toggleVisibility(result.item.element, true);
            });
        }
    }

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

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

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

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

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