let delayTimeout;
let brightnessTimeout;
let colorTimeout;
let color2Timeout;

async function post(path, value) {
console.log(path, value);
    try {
        const response = await fetch(path, {
            method: "POST",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: value 
        });
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
    } catch (error) {
        console.error('Error during POST request:', error);
    }
}

async function get(path) {
    try {
        const response = await fetch(path);
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return await response.json(); // Assuming you are expecting JSON response
    } catch (error) {
        console.error('Error during GET request:', error);
    }
}

async function updateColor(event) {
    event.preventDefault();
    clearTimeout(colorTimeout);
    colorTimeout = setTimeout(async function() {
        const color = document.getElementById('color').value;
        await post("/color", color);
    }, 500);
}

async function updateColor2(event) {
    event.preventDefault();
    clearTimeout(color2Timeout);
    color2Timeout = setTimeout(async function() {
        const color = document.getElementById('color2').value;
        await post("/color2", color);
    }, 500);
}

async function updatePattern(pattern) {
    event.preventDefault();
    await post("/pattern", pattern);
}

async function updateBrightness(event) {
    event.preventDefault();
    clearTimeout(brightnessTimeout);
    brightnessTimeout = setTimeout(async function() {
        const brightness = document.getElementById('brightness').value;
        await post('/brightness', brightness);
    }, 500);
}

async function updateDelay(event) {
    event.preventDefault();
    clearTimeout(delayTimeout);
    delayTimeout = setTimeout(async function() {
        const delay = document.getElementById('delay').value;
        await post('/delay', delay);
    }, 500);
}

async function updateNumLeds(event) {
    event.preventDefault();
    const numLeds = document.getElementById('num_leds').value;
    await post('/num_leds', numLeds);
}

async function updateWifi(event) {
    event.preventDefault();
    const ssid = document.getElementById('ssid').value;
    const password = document.getElementById('password').value;
    console.log(ssid, password);
    //await post('/num_leds', numLeds);
}

function createPatternButtons(patterns) {
    const container = document.getElementById('pattern_buttons');
    container.innerHTML = ''; // Clear previous buttons

    patterns.forEach(pattern => {
        const button = document.createElement('button');
        button.type = 'button'; // Use 'button' instead of 'submit'
        button.textContent = pattern;
        button.value = pattern;
        button.addEventListener('click', async function(event) {
            event.preventDefault();
            await updatePattern(pattern);
        });
        container.appendChild(button);
    });
}

document.addEventListener('DOMContentLoaded', async function() {
    document.getElementById('color').addEventListener('input', updateColor);
    document.getElementById('color2').addEventListener('input', updateColor2);
    document.getElementById('delay').addEventListener('input', updateDelay);
    document.getElementById('brightness').addEventListener('input', updateBrightness);
    document.getElementById('num_leds_form').addEventListener('submit', updateNumLeds);
    document.getElementById('wifi_form').addEventListener('submit', updateWifi);
    document.getElementById('delay').addEventListener('touchend', updateDelay);
    document.getElementById('brightness').addEventListener('touchend', updateBrightness);

    try {
        const patterns = await get("/patterns");
        console.log('Patterns fetched:', patterns);
        createPatternButtons(patterns);
    } catch (error) {
        console.error('Error fetching patterns:', error);
    }
    
    
});


// Function to toggle the display of the settings menu
function selectSettings() {
    const settingsMenu = document.getElementById('settings_menu');
    controls = document.getElementById('controls');
    settingsMenu.style.display = 'block';
    controls.style.display = 'none';
}

function selectControls() {
    const settingsMenu = document.getElementById('settings_menu');
    controls = document.getElementById('controls');
    settingsMenu.style.display = 'none';
    controls.style.display = 'block';
}