let delayTimeout;

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();
    const color = document.getElementById('color').value;
    await post("/color", color);
}

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

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

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);
}

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('led_form').addEventListener('submit', updateNumLeds);

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