document.getElementById("play-button").addEventListener("click", handlePlay);
document.getElementById("stop-button").addEventListener("click", handleStop);
document.getElementById("play-restart").addEventListener("click", handleRestart);
document.getElementById("trash").addEventListener("click", handleTrash);


function handlePlay() {
    chrome.runtime.sendMessage({
        kind: 'startExploration'
    }, {}, newState => {
        state = newState;
        render()
        refreshPopup(state)
    });
}

function handleStop() {
    chrome.runtime.sendMessage({
        kind: 'stopExploration'
    }, {}, newState => {
        state = newState;
        render()
        refreshPopup(state)
    });
}

function handleRestart() {
    chrome.runtime.sendMessage({
        kind: 'restartExploration'
    }, {}, newState => {
        state = newState;
        render()
        refreshPopup(state)
    });
}

function handleTrash() {
    chrome.runtime.sendMessage({
        kind: 'removeExploration'
    }, {}, newState => {
        state = newState;
        render()
        refreshPopup(state)
    });
}

function refreshPopup(state) {
    if (state.isRecording) {
        document.getElementById("recording-status").innerHTML = "recording";
        document.getElementById("play-button").classList.add("btn-success")
    } else {
        document.getElementById("recording-status").innerHTML = "not recording";
        document.getElementById("play-button").classList.remove("btn-success")
    }
}


