const colors = ['#ff0000', '#00ff00', '#0000ff'];
let colorsChanged = true;

function updateUi() {
    const radios = document.getElementsByName('gradient_type');
    document.getElementById('config_linear').style.display = radios[0].checked ? 'unset' : 'none';
    document.getElementById('config_radial').style.display = radios[1].checked ? 'unset' : 'none';
    document.getElementById('config_conic').style.display = radios[2].checked ? 'unset' : 'none';

    if (colorsChanged) {
        colorsChanged = false;
        const list = document.getElementById('color-list');
        while (list.lastChild) list.lastChild.remove();
        for (let i in colors) {
            i = Number(i);
            const color = colors[i];

            let colorInput = document.createElement('input');
            colorInput.type = 'color';
            colorInput.value = color;
            list.appendChild(colorInput);

            let button1 = document.createElement('button');
            button1.innerText = '^';
            button1.disabled = i == 0;
            button1.onclick = () => moveUp(i);
            list.appendChild(button1);

            let button2 = document.createElement('button');
            button2.innerText = 'v';
            button2.disabled = i == colors.length - 1;
            button2.onclick = () => moveDown(i);
            list.appendChild(button2);

            let button3 = document.createElement('button');
            button3.innerText = 'Delete';
            button3.onclick = () => removeColor(i);
            list.appendChild(button3);

            list.appendChild(document.createElement('br'));
        }
    }
}

function removeColor(index) {
    colorsChanged = true;
    colors.splice(index, 1);
    updateUi();
}

function moveUp(index) {
    colorsChanged = true;
    [colors[index], colors[index - 1]] = [colors[index - 1], colors[index]];
    updateUi();
}

function moveDown(index) {
    colorsChanged = true;
    [colors[index], colors[index + 1]] = [colors[index + 1], colors[index]];
    updateUi();
}

/**
 * @returns {string}
 */
function generateCss() {
    const radios = document.getElementsByName('gradient_type');
    if (radios[0].checked) return generateCssLinear();
    if (radios[1].checked) return generateCssRadial();
    if (radios[2].checked) return generateCssConic();
}

/**
 * @returns {string}
 */
function generateCssLinear() {

}
/**
 * @returns {string}
 */
function generateCssRadial() {

}
/**
 * @returns {string}
 */
function generateCssConic() {

}

// Initial update
setTimeout(() => {
    updateUi();
}, 0);