const buttonState = {
    'buttonBar-button-1': false,
    //'buttonBar-button-2': false,
    //'buttonBar-button-3': false,
    'buttonBar-button-4': false,
    'buttonBar-button-5': false,
    'buttonBar-button-6': false,
    'buttonBar-button-7': false,
     'buttonBar-button-9': false,
        'buttonBar-button-10': false,
        'buttonBar-button-11': false,
     
     
};

function untoggleButtonBarButtons() {
    for (let id in buttonState) {
        const button = document.getElementById(id);
        if (button) {
            buttonState[id] = false;
            button.style.backgroundColor = '';
        }
    }

    for (let id in buttonStateSub) {
        const button = document.getElementById(id);
        if (button) {
            buttonStateSub[id] = false;
            button.style.backgroundColor = '';
        }

    }

    for (let id in buttonStateSubMore) {
        const button = document.getElementById(id);
        if (button) {
            buttonStateSubMore[id] = false;
            button.style.backgroundColor = '';
        }

    }

}


function addButtonsToButtonBar() {

    makeButtonForButtonBar("1", "Board", rouletteTable);
    //makeButtonForButtonBar("2", "Missed", allMissed);
    //makeButtonForButtonBar("3", "Pattern", getPattern);
    makeButtonForButtonBar("4", "Triggers", getTriggerList);
    makeButtonForButtonBar("5", "Alerts", display_alerts);
    makeButtonForButtonBar("6", "Legend", legend);
    makeButtonForButtonBar("8", "Stats", stats_blank_page);
    makeButtonForButtonBar("7", "More", emptyDiv);
      makeButtonForButtonBar("9", "Counts", displayRouletteStats);
      makeButtonForButtonBar("10", "AI Predict", ai_panel);
      makeButtonForButtonBar("11", "Casino Numbers", buildCasinoFetcherPanel);

    clickFirstButton();

    injectSharedResponsiveStyles("button-bar");

}
function emptyDiv() {
    let container = document.createElement('div');
    return container;
}
function clickFirstButton() {
    const firstButton = document.getElementById('buttonBar-button-1');
    if (firstButton) {
        firstButton.click();

    }
}
function toggleBoardOn() {
    buttonBarContentBoard.style.display = 'block';
    buttonBarContent.style.display = 'none';

}
function toggleBoardOff() {
    buttonBarContentBoard.style.display = 'none';
    buttonBarContent.style.display = 'block';
}
function toggleSubButtonBar(show) {
    subButtonBar.hidden = !show;
}

function makeButtonForButtonBar(id, title, functionCall) {

    // toggleBoardOff();

    const button = document.createElement('button');
    button.id = `buttonBar-button-${id}`;
    button.textContent = title;
    button.className = 'button-bar-button';
    button.onclick = () => {
        untoggleButtonBarButtons();
        buttonBarContents(id, functionCall);

        // Board
        if (id === '1') {
            runAfterUpdates();
            stats_checkboxes();
        }
        // Missed    
        if (id === '2') {
            missed_message();
        }
        // Pattern
        if (id === "3") {
            pattern_message();
        }

        // Trigger
        if (id === "4") {
            
            let subButtonBar = document.getElementById('sub-button-bar');
            if (subButtonBar) {
                subButtonBar.style.display = 'flex';  // Change display to 'flex' to show the subButtonBar
                if (triggerListLoss.length == 0) {
                    clickFirstButton_sub();

                }
            }
        } else {
            let subButtonBar = document.getElementById('sub-button-bar');
            if (subButtonBar) {
                subButtonBar.style.display = 'none';  // Hide it again if any other button is clicked
            }
        }


        // More
        if (id === "8") {
            let subButtonBar = document.getElementById('stats-sub-button-bar');
            if (subButtonBar) {
                subButtonBar.style.display = 'flex';  // Change display to 'flex' to show the subButtonBar

                stats_first_click();
            }
        } else {
            let subButtonBar = document.getElementById('stats-sub-button-bar');
            if (subButtonBar) {
                subButtonBar.style.display = 'none';  // Hide it again if any other button is clicked
            }
        }


        // More
        if (id === "7") {
            let subButtonBar = document.getElementById('more-sub-button-bar');
            if (subButtonBar) {
                subButtonBar.style.display = 'flex';  // Change display to 'flex' to show the subButtonBar
                clickFirstButton_sub_more();
            }
        } else {
            let subButtonBar = document.getElementById('more-sub-button-bar');
            if (subButtonBar) {
                subButtonBar.style.display = 'none';  // Hide it again if any other button is clicked
            }
        }



    };
    document.getElementById('button-bar').appendChild(button);
}

function toggleButton(buttonId) {
    // Reset all buttons first
    resetOtherButtons(buttonId);
    // Toggle the clicked button
    buttonState[buttonId] = true;
    const button = document.getElementById(buttonId);
    button.style.backgroundColor = 'lightgreen';
}

function resetOtherButtons(exceptId) {
    // Iterate over all button states and reset except the one that is clicked
    Object.keys(buttonState).forEach(id => {
        if (id !== exceptId) {
            buttonState[id] = false;
            const button = document.getElementById(id);
            button.style.backgroundColor = '';
        }
    });
}

function hideAllContentDivsExcept(exceptId) {
    Object.keys(buttonState).forEach(id => {
        let contentDiv = document.getElementById(`button-bar-div-${id.slice(-1)}`);
        if (contentDiv && id !== `buttonBar-button-${exceptId}`) {
            contentDiv.style.display = 'none';
        }
    });
}

function buttonBarContents(id, functionCall) {
    const buttonId = `buttonBar-button-${id}`;
    toggleButton(buttonId);

    // Clear previous content before adding new content
    const contentsContainer = document.getElementById('button-bar-content');
    contentsContainer.innerHTML = '';  // Clear all existing content

    let contentDiv = document.getElementById(`button-bar-div-${id}`);

    if (buttonState[buttonId]) {
        if (!contentDiv) {
            // The container doesn't exist, so create it
            contentDiv = document.createElement('div');
            contentDiv.id = `button-bar-div-${id}`;
            var contents = functionCall();  // Assuming functionCall returns the content to be displayed
            contentDiv.appendChild(contents);
        }
        // Whether newly created or already existing, we append it to the contents container
        contentsContainer.appendChild(contentDiv);
        contentDiv.style.display = 'block';  // Ensure the div is visible
    }
}


const style = document.createElement('style');
style.textContent = `
  #button-bar {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px;
    background-color: black !important;  /* Ensure bar is black */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;  /* include padding inside width */
    width: 100vw;             /* force full viewport width */
  }
  #button-bar::-webkit-scrollbar {
    display: none;
  }
  .button-bar-button {
    min-width: 240px;
    min-height: 110px;
    font-size: 60px;
    font-weight: bold;
    padding: 10px 10px;
    border: 2px solid #444;
    border-radius: 14px;
    background-color: #eee;  /* button stays light */
    color: black;
    flex-shrink: 0;
    margin-right: 10px;      /* spacing between buttons */
  }
  @media (max-width: 600px) {
    #button-bar {
      padding: 5px;           /* reduce padding on small screens */
    }
    .button-bar-button {
      min-width: 180px;
      font-size: 36px;
      padding: 18px 24px;
    }
  }
`;
document.head.appendChild(style);
