/*
 * Farbfelder in den Verwaltungsformularen.
 *
 * Eine Farbe tippt man nicht, man wählt sie. Im Editor gibt es dafür längst ein Bedienelement aus
 * Farbwähler, Textfeld und Palettenliste - in den Formularen unter „Design" und „Einstellungen"
 * stand bisher nur ein nacktes Textfeld.
 *
 * Das Textfeld bleibt die Wahrheit: Es nimmt einen Wert wie `#1a2b3c` **oder** einen Schlüssel aus
 * der Palette (`@accent`), und das kann ein Farbwähler nicht. Deshalb wird es nicht ersetzt,
 * sondern ergänzt. Ohne JavaScript bleibt das Feld genau das, was es vorher war.
 */
(() => {
    const felder = [...document.querySelectorAll('input[data-color]')];
    if (0 === felder.length) {
        return;
    }

    for (const feld of felder) {
        const palette = JSON.parse(feld.dataset.palette || '[]');
        const reihe = document.createElement('div');
        reihe.className = 'color-field';
        feld.parentNode.insertBefore(reihe, feld);

        const waehler = document.createElement('input');
        waehler.type = 'color';
        waehler.className = 'color-field-swatch';
        waehler.setAttribute('aria-label', 'Farbwähler für ' + (feld.labels?.[0]?.textContent.trim() || 'diese Farbe'));
        // Der Wähler kennt nur Hexwerte. Steht im Feld ein Palettenschlüssel, zeigt er die Farbe,
        // für die der Schlüssel steht - sonst bliebe er auf Schwarz stehen und sähe falsch aus.
        const alsHex = wert => {
            if (/^#[0-9a-f]{6}$/i.test(wert)) {
                return wert;
            }
            const treffer = palette.find(eintrag => '@' + eintrag.key === wert);

            return treffer ? treffer.value : '#000000';
        };
        waehler.value = alsHex(feld.value || feld.placeholder || '#000000');
        waehler.addEventListener('input', () => {
            feld.value = waehler.value;
            feld.dispatchEvent(new Event('input', { bubbles: true }));
        });

        reihe.append(waehler, feld);

        if (palette.length > 0) {
            const auswahl = document.createElement('select');
            auswahl.className = 'color-field-palette';
            auswahl.setAttribute('aria-label', 'Farbe aus der Palette');
            auswahl.append(new Option('Aus der Palette …', ''));
            for (const eintrag of palette) {
                auswahl.append(new Option(`${eintrag.name} (${eintrag.value})`, '@' + eintrag.key));
            }
            auswahl.value = palette.some(eintrag => '@' + eintrag.key === feld.value) ? feld.value : '';
            auswahl.addEventListener('change', () => {
                if ('' === auswahl.value) {
                    return;
                }
                feld.value = auswahl.value;
                waehler.value = alsHex(auswahl.value);
                feld.dispatchEvent(new Event('input', { bubbles: true }));
            });
            reihe.append(auswahl);
        }

        // Tippt jemand von Hand, folgt der Wähler mit - solange der Wert einer ist, den er kennt.
        feld.addEventListener('input', () => {
            const hex = alsHex(feld.value);
            if (waehler.value !== hex) {
                waehler.value = hex;
            }
        });
    }
})();