document.getElementById("connectionSignIn").addEventListener("click", handleConnection);
document.getElementById("connectionForm").addEventListener("submit", handleConnection);
document.getElementById("connectionSignOut").addEventListener("click", handleDisconnection);
document.getElementById("connectionSync").addEventListener("click", handleSync);
document.getElementById("openSessionWindow").addEventListener("click", handleDrawAttentionToWindow);
document.getElementById("toggleShouldTestInNewWindow").addEventListener("change", handleTestOnNewWindow);

function handleConnection(e) {
    e.preventDefault()
    const code = document.getElementById("connectionCodeInput").value
    if (!code) {
        document.getElementById('connexionMessage').innerHTML = 'Enter Connection code.';
        return
    }
    sendMessage({
        kind: "connect",
        connectionCode: code
    })
    .then((response) => {
        if (response  && response === "ok") {
            getState();
        } else {
            document.getElementById('connexionMessage').innerHTML = 'Unknown Connection code. Please try again.';
        }
    });
}

function handleDisconnection(e) {
    e.preventDefault()
    sendMessage({
        kind: "disconnect",
    })
    .then(response => {
        if (!response) {
            document.getElementById('connexionMessage').innerHTML = 'Error, cannot disconnect';
        }
        if (response.error) {
            document.getElementById('connexionMessage').innerHTML = 'Error, cannot disconnect';
        } else {
            renderNotConnected();
            connectionCode = undefined
        }
    });
}

function handleSync(e) {
    e.preventDefault();
    sendMessage({
        kind: "reloadWebSite",
    })
    .then(response => {
        if (!response) {
            document.getElementById('connexionMessage').innerHTML = 'Error, cannot synchronize';
        }
        if (response.error) {
            document.getElementById('connexionMessage').innerHTML = 'Error, cannot synchronize';
        } else {
            document.getElementById('connexionMessage').innerHTML = 'You are still connected. WebSite is refreshed !'
            //console.log("Website reloaded");
        }
    });
}

function handleDrawAttentionToWindow(e) {
    e.preventDefault();
    sendMessage({
        kind: "drawAttention",
    }).then(response => {
        if (!response) {
            console.log(`Background does not answer`);
        }
        if (response.error) {
            console.log(response.error);
        }
    })
}

function handleTestOnNewWindow(e) {
    e.preventDefault();
    const testOnNewWindow = e.target.checked;
    Promise.all([
        sendMessage({
            kind: "setCreateNewWindowOnConnect",
            shouldCreateNewWindowOnConnect: testOnNewWindow
        }),
        sendMessage({
            kind: "setCloseWindowOnConnect",
            shouldCloseWindowOnDisconnect: testOnNewWindow
        })
    ]).then(() => {
        getState()
    })
}
