Linedancer (LD4) :: "UI/Drop Down Menu/Creation.js"

// Linedancer (LD4) :: "UI/Drop Down Menu/Creation.js"

/**
 * Create the dropdown menu dynamically
 */
createDropdownMenu() {
    const dropdownContainer = document.createElement('div');
    Object.assign(dropdownContainer.style, {
        position: 'fixed',
        top: '10px',
        right: '10px',
        zIndex: '1000',
        backgroundColor: 'rgba(0,0,0,0.85)',
        padding: '10px',
        border: '1px solid #ccc',
        borderRadius: '5px'
    });

    const caption = document.createElement('div');
    caption.textContent = 'Menu ▼';
    Object.assign(caption.style, {
        color: 'white',
        fontSize: '16px',
        padding: '5px',
        textAlign: 'center',
        cursor: 'pointer'
    });

    const optionsContainer = document.createElement('div');
    Object.assign(optionsContainer.style, {
        display: 'none',
        flexDirection: 'column',
        backgroundColor: 'rgba(0,0,0,0.95)',
        borderRadius: '5px',
        border: '1px solid #ccc',
        marginTop: '5px',
        right: '0px',
        position: 'relative',
        width: '120px',
    });

    // Static options
    const options = [
        { value: 'redirect::exit', label: 'Exit' },
        { value: 'redirect::reset', label: 'Reset' }
    ];

    this.availableGamepads = [];

// Fetch additional gamepad options
fetch(`http://${window.location.hostname}/LD4/Linedancer/scripts/php/UI/Gamepad/Available Gamepads.php`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`Failed to fetch gamepads: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        //const options = []; // Initialize options array

        data.forEach(gamepad => {
            gamepad = gamepad.replace(/\.json$/, ''); // Remove .json extension
            options.push({ value: `gamepad::${gamepad}`, label: gamepad });

            this.availableGamepads.push(gamepad);
        });

        console.log("Available gamepads:", this.availableGamepads); // Log the modified options array

        this.populateDropdownOptions(options, optionsContainer); // Populate fetched options
    })
    .catch(error => {
        console.error("Error fetching available gamepads:", error);
    });

    // Populate static options immediately
    this.populateDropdownOptions(options, optionsContainer);

    caption.addEventListener('click', () => {
        this.toggleDropdown(optionsContainer, dropdownContainer);
    });

    dropdownContainer.appendChild(caption);
    dropdownContainer.appendChild(optionsContainer);
    document.body.appendChild(dropdownContainer);
}