var socket;
var timer;
var timeout;
var modal = new bootstrap.Modal(document.getElementById("reconnectBackdrop"));
var slectedChannel = 8;

function addLabelAndListener(name, callback) {
    let rootElement = document.getElementById(name + "-input")
    rootElement.addEventListener('click', callback);

    let inputArray = rootElement.elements[name + "-selection"];
    for (let inputIndex = 0; inputIndex < inputArray.length; inputIndex++) {
        let element = inputArray[inputIndex]
        let label = document.createElement("label");
        label.classList.add("btn");
        label.classList.add("btn-outline-primary");
        label.classList.add("text-capitalize");
        label.setAttribute("for", element.id);
        labelText = element.id.split('-')[0];
        label.innerHTML = labelText;
        element.insertAdjacentElement("afterend", label);
    }
}

addLabelAndListener("ws", wsSelectCallback);
addLabelAndListener("mode", modeSelectCallback);
addLabelAndListener("pattern", patternSelectCallback);
addLabelAndListener("channel", channelSelectCallback);
// addLabelAndListener("channelGlobal", channelSelectCallback);

var colorPicker = new iro.ColorPicker('#mainPicker', {
    colors: [
        'hsl(0, 100, 50)', // pure red
        'hsl(180, 50, 100)' // pure green
    ],
    layout: [{
        component: iro.ui.Wheel,
        options: {
            wheelLightness: false
        }
    }, {
        component: iro.ui.Slider,
        options: {
            sliderType: 'value'
        }
    }],
    layoutDirection: 'horizontal',
    // display: "flex",
    width: 250,
    margin: 0,
    handleRadius: 14
});

var modulationPicker = new iro.ColorPicker('#modulationPicker', {
    colors: [
        'hsl(0, 100, 50)', // pure red
    ],
    layout: [{
        component: iro.ui.Wheel,
        options: {
            wheelLightness: false
        }
    }, {
        component: iro.ui.Slider,
        options: {
            sliderType: 'value'
        }
    }],
    layoutDirection: 'horizontal',
    // display: "flex",
    width: 250,
    margin: 0,
    handleRadius: 14
});

reconnect();
colorPicker.on("color:change", colorChangeCallback);
modulationPicker.on("color:change", modulationColorChangeCallback);