let jsonContent = [];

function printChoices(node) {
    if (node.choices) {
        return node.choices.forEach(choice => {
            const newBtn = document.createElement('button');
            newBtn.onclick = () => selectChoice(choice.id);
            newBtn.innerHTML = choice.text;
            newBtn.classList.add('choice-btn');
            document.getElementById('choices').appendChild(newBtn);
        });
    }
}

function selectChoice(choiceId) {
    console.log('Click on choice ', choiceId);
    const allChoices = jsonContent.flatMap(node =>
        !node.choices ? [] : node.choices
    );
    const selectedChoice = allChoices.find(choice => choice.id === choiceId);
    const nextNode = jsonContent.find(node => node.id === selectedChoice.nextNode);

    addChoiceToHistory(selectedChoice);
    updateActiveNode(nextNode);
}

function addChoiceToHistory(selectedChoice) {
    const choiceDiv = document.createElement('div');
    choiceDiv.innerHTML = selectedChoice.text;
    choiceDiv.classList.add('choice-div');
    document.getElementById('history').appendChild(choiceDiv);
}

function updateActiveNode(node) {
    const nodeDiv = document.createElement('div');
    nodeDiv.innerHTML = node.text;
    nodeDiv.classList.add('node-div');
    document.getElementById('history').appendChild(nodeDiv);

    document.getElementById('choices').innerHTML = '';
    printChoices(node);
}

window.onload = () => {
    fetch('/nodes', {
        method: 'GET'
    })
    .then(response => response.json())
    .then(data => {
        jsonContent = data;
        updateActiveNode(jsonContent[0]);
    });
}