/**
 * Creates a new player element.
 * @param {StoredPlayerInfo} player
 * @returns {HTMLElement}
 */
#createPlayerElement(player) {
    // Create a new DOM element if none exists for the player.
    const playerElement = document.createElement('li');
    playerElement.setAttribute('role', 'listitem');
    playerElement.setAttribute('data-player-id', player.playerId);
    // Add click event to insert the player name into the chat input
    playerElement.addEventListener('click', () => {
        const cursorPos = this.#chatInput.selectionStart;
        const textBefore = this.#chatInput.value.substring(0, cursorPos);
        const textAfter = this.#chatInput.value.substring(cursorPos);
        this.#chatInput.value = `${textBefore}${player.playerDisplayName}${textAfter}`;
        this.#chatInput.focus();
        this.#chatInput.selectionStart = this.#chatInput.selectionEnd =
            cursorPos + player.playerDisplayName.length;
    });

    playerElement.appendChild((() => {
        const headContainer = document.createElement('div');
        headContainer.className = 'player-head-container';
        headContainer.title = `${player.playerDisplayName}'s head`;

        headContainer.appendChild((() => {
            const headImg = document.createElement('img');
            headImg.className = 'player-head';
            headImg.src = player.playerTextureUrl;
            headImg.setAttribute('aria-hidden', 'true');
            headImg.onerror = () => {
                headImg.src = '/img/steve.png';
            };
            return headImg;
        })());

        headContainer.appendChild((() => {  
            const headOverlay = document.createElement('img');
            headOverlay.className = 'player-head-overlay';
            headOverlay.src = player.playerTextureUrl;
            headOverlay.setAttribute('aria-hidden', 'true');
            headOverlay.onerror = () => {
                headOverlay.src = '/img/steve.png';
            };
            return headOverlay;
        })());

        return headContainer;
    })());

    playerElement.appendChild((() => {
        const nameSpan = document.createElement('span');
        nameSpan.className = 'player-name';
        nameSpan.textContent = player.playerDisplayName;
        nameSpan.title = player.playerName;

        // Specifically for aria labels show both playerDisplayName and playerName if they are different.
        if (player.playerDisplayName !== player.playerName) {
            nameSpan.setAttribute(
                'aria-label',
                `Display name: ${player.playerDisplayName}, Username: ${player.playerName}`,
            );
        } else {
            nameSpan.setAttribute(
                'aria-label',
                `Player name: ${player.playerDisplayName}`,
            );
        }

        return nameSpan;
    })());

    return playerElement;
}