export function convertLegendToDropdown(inID: string): void {
    jQuery('ul.seatCharts-legendList').each(function () {
        let select: JQuery<HTMLSelectElement> = jQuery(document.createElement('select'))
            .insertBefore(
                jQuery(this).hide()
            );

        select.attr({ id: inID });
        appendFirstLegendOption(select);
        appendLegendOptions(this, select);        
    });
}

function appendLegendOptions(element: HTMLElement, inSelect: JQuery<HTMLSelectElement>) {
    jQuery('>li', element).each(function () {
        const className: string = jQuery(this)[0].children[0].classList[3];
        const val: string = className.substring(1);
        const text: string = (<HTMLElement>jQuery(this)[0].children[1]).innerText;

        appendLegendOption(inSelect, className, val, text);
    });
}

function appendLegendOption(inSelect: JQuery<HTMLSelectElement>, className: string, val: string, text: string): void {
    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
    option.attr({ 'value': val, 'class': className }).text(text);
    inSelect.append(option);
}

function appendFirstLegendOption(inSelect: JQuery<HTMLSelectElement>): void {
    let option: JQuery<HTMLOptionElement> = jQuery('<option/>');
    option.attr({ 'value': 'all' }).text('Alle Preiskategorien');
    option.css("color", "#5c5c5c");
    inSelect.append(option);
}

export function changeDropdownLegendBGColor(inSelector: string, inValue: string, inClassName: string): void {
    let bgColor: string = "#fafafa";
    let color: string = "#5c5c5c";

    if (inValue !== "all") {
        color = "white";
        bgColor = jQuery(inClassName).css("background-color");
    }

    jQuery(inSelector).css("color", color);
    jQuery(inSelector).css("background-color", bgColor);
    jQuery(`${inSelector} option[value="all"]`).css("color", color);
}