export function serverSelectMenuItem(selectedIndex) {
    return `
    <button id="server-select" data-plyr="settings" type="button" class="plyr__control plyr__control--forward" role="menuitem" aria-haspopup="true">
        <span>Server<span class="plyr__menu__value">CDN` + (selectedIndex + 1) + `</span></span>
    </button>`;
}

export function serverSelectSubmenu(selectedIndex, serverCount) {
    let htmlList = `
        <div id="server-select-list" hidden>
        <button type="button" class="plyr__control plyr__control--back" id="server-select-list-back-btn">
            <span aria-hidden="true">Server</span><span class="plyr__sr-only">Go back to previous menu</span>
        </button>
        <div role="menu">
    `;

    for (let i = 0; i < serverCount; i++) {
        let checked = selectedIndex == i ? 'true' : 'false';
        let index = i + 1;
        htmlList += `
            <button data-plyr="server" type="button" role="menuitemradio" class="plyr__control change_server" aria-checked="` + checked + `" value="` + i +`">
                <span>Server ` + index + `<span class="plyr__menu__value"><span class="plyr__badge">CDN` + index + `</span></span></span>
            </button>
        `;
    }

    htmlList += `
        </div>
    </div>
    `;

    return htmlList;
}

export function serverSelectMenuClickToggle() {
    if (document.getElementById('server-select-list').hidden) {
        document.querySelector('div[role="menu"]').hidden = true;
        document.getElementById('server-select-list').hidden = false;
        return;
    }

    document.getElementById('server-select-list').hidden = true;
    document.querySelector('div[role="menu"]').hidden = false;
}