let delayTimeout;

function post(path, value) {
    fetch(path, {
        method: "POST",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: encodeURIComponent(value)
    });
}

function get(path, value) {
    fetch(path, {
        method: "GET",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
    });
}

function updateColor() {
    const color = document.getElementById('color').value;
    post("POST", "/color", color);
}

function updatePattern(pattern) {
    const patternButtons = document.querySelectorAll('button[name="pattern"]');
    //patternButtons.forEach(button => button.disabled = true);
    post("/pattern", pattern);
}

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

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

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('color').addEventListener('input', updateColor);
    document.getElementById('delay').addEventListener('input', updateDelay);
    document.getElementById('led_form').addEventListener('submit', updateNumLeds);

    const patternButtons = document.querySelectorAll('button[name="pattern"]');
    patternButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
            event.preventDefault();
            const pattern = this.value;
            updatePattern(pattern);
        });
    });
});