document.addEventListener('DOMContentLoaded', function () {
    // Define the updateSettings function first
    function updateSettings(settingKey, settingValue) {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/updateSettings', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                console.log('Settings updated successfully!');
            } else {
                console.log('Failed to update settings.');
            }
        };
        xhr.send(encodeURI(settingKey + '=' + settingValue));
    }

    const settingsIcon = document.querySelector('.settings-icon-link-search');
    const searchMenu = document.querySelector('.search-menu');

    settingsIcon.addEventListener('click', function () {
        searchMenu.classList.toggle('settings-menu-hidden');
        searchMenu.classList.toggle('settings-menu-visible');
    });

    // Theme change event listeners
    document.getElementById('dark_theme').addEventListener('click', function () {
        window.location.href = '/search?theme=dark';
    });
    document.getElementById('light_theme').addEventListener('click', function () {
        window.location.href = '/search?theme=light';
    });

    // Event listener for Safe Search Selection
    document.getElementById('safeSearchSelect').addEventListener('change', function () {
        updateSettings('safe', this.value);
    });

    // Event listener for Language Selection
    document.getElementById('languageSelect').addEventListener('change', function () {
        updateSettings('lang', this.value);
    });
});