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];
        element.value = inputIndex;
        label.innerHTML = labelText;
        element.insertAdjacentElement("afterend", label);
    }
}

addLabelAndListener("ws", buttonSelectCallback);
addLabelAndListener("mode", buttonSelectCallback);
addLabelAndListener("pattern", buttonSelectCallback);
addLabelAndListener("channel", buttonSelectCallback);
// addLabelAndListener("channelGlobal", channelSelectCallback);

var colorPicker = new iro.ColorPicker('#mainPicker', {
    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
});

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