let state;
let currentWindow;

let connectionCode;
let testerName;
let displayComments;
let followCode;

checkDeprecated();
getState();
handleMessage();

function handleMessage() {
    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
        switch (message.msg) {
            case "getWindowId":
                chrome.windows.getCurrent((window) => {
                    sendResponse(window.id)
                })
                return true;
            default:
                return false;
        }
    });
}

function checkDeprecated() {
    chrome.runtime.sendMessage({
        kind: "checkDeprecated",
    }, {}, extensionInfo => {
        if (extensionInfo.latestVersion && extensionInfo.currentVersion !== extensionInfo.latestVersion) {
            alert(`Your current version ${extensionInfo.currentVersion} of the AIFEX Chrome Exstention is deprecated, please get latest version ${extensionInfo.latestVersion} at ${extensionInfo.url}`)
        }
        console.log("Plugin version checked")
    })
}

function getState() {
    chrome.runtime.sendMessage({
        kind: "getStateForPopup",
    }, {}, newState => {
        if (newState !== undefined) {
            state = newState
            render();
        }
    });
}

function render() {
    if (!state.connection) {
        renderNotConnected();
    } else {
        chrome.windows.getCurrent({}, window => {
            connectionCode = state.connection.sessionId + '$' + state.connection.modelId;
            if (state.followedConnection) {
                followCode = state.followedConnection.sessionId + '$' + state.followedConnection.modelId;
            } else {
                followCode = ""
            }
            testerName = state.testerName;
            displayComments = state.isDisplayingComments;
            if (window.id === state.managedWindowId) {
                renderConnected(state);
            } else {
                renderConnectedInOtherWindow();
            }
        })
    }
}

function renderNotConnected() {
    document.getElementById("connection-component").style.display = "block";
    document.getElementById("connexionMessage").innerHTML = `You are not connected.`;
    document.getElementById("connectionCodeInput").value = "";
    document.getElementById("connectionCodeInput").disabled = false;
    document.getElementById("connectionSignIn").style.display = "table-cell";
    document.getElementById("connectionSignOut").style.display = "none";
    document.getElementById("openSessionWindow").style.display = "none";

    document.getElementById("record-component").style.display = "none";
    document.getElementById("comment-component").style.display = "none";
    document.getElementById("identity-component").style.display = "none";
    document.getElementById("follow-component").style.display = "none";
    document.getElementById("connectionSync").style.display = "none";
    document.getElementById("objectives-component").style.display = "none";
}

function renderConnectedInOtherWindow() {
    document.getElementById("connection-component").style.display = "block";
    document.getElementById("connexionMessage").innerHTML = `You are connected in another window.`;
    document.getElementById("connectionCodeInput").value = connectionCode;
    document.getElementById("connectionCodeInput").disabled = true;
    document.getElementById("connectionSignIn").style.display = "none";
    document.getElementById("connectionSignOut").style.display = "table-cell";
    document.getElementById("openSessionWindow").style.display = "none";

    document.getElementById("record-component").style.display = "none";
    document.getElementById("comment-component").style.display = "none";
    document.getElementById("identity-component").style.display = "none";
    document.getElementById("follow-component").style.display = "none";
    document.getElementById("connectionSync").style.display = "none";
    document.getElementById("objectives-component").style.display = "none";

    document.getElementById("openSessionWindow").style.display = "table-cell"
}

function renderConnected() {
    document.getElementById("connection-component").style.display = "block";
    document.getElementById("connexionMessage").innerHTML = `You are connected`;
    document.getElementById("connectionCodeInput").value = connectionCode;
    document.getElementById("connectionCodeInput").disabled = true;
    document.getElementById("connectionSignIn").style.display = "none";
    document.getElementById("connectionSignOut").style.display = "table-cell";
    document.getElementById("connectionSync").style.display = "table-cell";
    document.getElementById("openSessionWindow").style.display = "table-cell"
    document.getElementById("record-component").style.display = "block";
    document.getElementById("comment-component").style.display = "block";
    document.getElementById("identity-component").style.display = "block";

    //document.getElementById("follow-component").style.display = "block";
    document.getElementById("follow-component").style.display = "none";

    document.getElementById("displayCommentsCheckbox").checked = displayComments;
    
    if (followCode) {
        document.getElementById("connexionFollowMessage").innerHTML = `You are following a session.`;
        document.getElementById("inputFollowCode").value = followCode;

        document.getElementById("followSignIn").style.display = "none"
        document.getElementById("followSignOut").style.display = "table-cell"
        document.getElementById("inputFollowCode").value = followCode
        document.getElementById("inputFollowCode").disabled = true
    } else {
        document.getElementById("connexionFollowMessage").innerHTML = `You are not following a session.`;
        document.getElementById("followSignIn").style.display = "table-cell"
        document.getElementById("followSignOut").style.display = "none"
        document.getElementById("inputFollowCode").value = null
        document.getElementById("inputFollowCode").disabled = false    
    }

    if (testerName) {
        document.getElementById("testerNameInput").value = testerName
        document.getElementById("testerNameInput").disabled = true
    } else {
        document.getElementById("testerNameInput").value = null
        document.getElementById("testerNameInput").disabled = false
    }

    document.getElementById("explorationLength").innerText = state.numberOfPerformedInteraction
    if (!state.hasBaseURL) {
        document.getElementById("play-restart").style.display = "none"
    } else {
        document.getElementById("play-restart").style.display = "block"
    }
    
    renderObjectives(state)

    if (state.isRecording) {
        document.getElementById("recording-status").innerHTML = "recording";
        document.getElementById("play-button").classList.add("btn-success")
        document.getElementById("trash").style.display = "inline-block"
    } else {
        document.getElementById("recording-status").innerHTML = "not recording";
        document.getElementById("play-button").classList.remove("btn-success")
        document.getElementById("trash").style.display = "none"
    }

}
