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;
            colorInput.onchange = (e) => changeColor(i, e.currentTarget.value);
            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'));
        }
    }

    document.getElementById('custom_pos_inputs').hidden = !document.getElementById('conic_custom_position').checked;

    const css = generateCss();
    if (css) {
        document.getElementById('preview').style.backgroundImage = css;
        document.getElementById('output').value = css;
    }
}

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

function appendColor() {
    colorsChanged = true;
    colors.push('#ffbbaa');
    updateUi();
}

function changeColor(index, color) {
    colorsChanged = true;
    colors[index] = color;
    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();
    return '';
}

/**
 * @returns {string}
 */
function generateCssLinear() {
    const rotation = document.getElementById('rotation').value;
    return `linear-gradient(${rotation}deg,${colors.join(',')})`;
}
/**
 * @returns {string}
 */
function generateCssRadial() {
    let radios = document.getElementsByName('radial_mode');
    const mode = Array.from(radios).find(r => r.checked).value ?? 'circle';
    radios = document.getElementsByName('radial_pos');
    const pos = Array.from(radios).find(r => r.checked).value ?? 'center';
    return `radial-gradient(${mode} at ${pos}, ${colors.join(',')})`;
}
/**
 * @returns {string}
 */
function generateCssConic() {
    const rotation = document.getElementById('rotation_conic').value;
    const showCustomPos = document.getElementById('conic_custom_position').checked;
    const x = document.getElementById('conic_x').value;
    const y = document.getElementById('conic_y').value;
    return `conic-gradient(from ${rotation}deg${showCustomPos ? ` at ${x}% ${y}%` : ''}, ${colors.join(',')})`;
}

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