function invokeLogin() {
    // Redirects to the Authorization Server for sign in.
    return mgr.signinRedirect();
}

function invokeLogout() {
    // Redirects to the Authorization Server for sign out.
    return mgr.signoutRedirect();
}

async function handleAuthorizationServerCallback() {
    try {
        let user = await mgr.signinRedirectCallback();
        updateUserUI(user);
    } catch (error) {
        updateUserUI(undefined, error);
    }
}

async function callApi() {
    try {
        let user = await mgr.getUser();
        let response = await fetch(
            window.location.origin + '/api/values',
            {
                method: 'GET',
                headers: {
                    'Authorization': `Bearer ${user.access_token}`
                }
            });

        if (response.ok) {
            return await response.json();
        } else {
            let text = await response.text();
            return text;
        }
    } catch (e) {
        return e.message;
    }
}

// Code to update the UI

if (window.location.hash) {
    handleAuthorizationServerCallback();
    window.location.hash = '';
}

let ids = {
    login: 'login',
    logout: 'logout',
    callApi: 'call-api',
    loginResult: 'login-result',
    apiResults: 'api-result'
};

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        let login = document.getElementById(ids.login);
        let logout = document.getElementById(ids.logout);
        let callApi = document.getElementById(ids.callApi);

        login.addEventListener('click', invokeLogin);
        logout.addEventListener('click', invokeLogout);
        callApi.addEventListener('click', invokeCallApi);
    }
};

function updateUserUI(user, error) {
    let loginResults = document.getElementById(ids.loginResult);
    let heading = document.createElement('h2');
    heading.innerText = 'Login result';
    if (user) {
        loginResults.appendChild(heading);
        loginResults.insertAdjacentText('beforeend', `Hello ${user.profile.name}`);
        updateButtons(true, false, false);
    } else {
        loginResults.innerText = error.message;
    }
}

function updateButtons(login, callApi, logout) {
    let loginB = document.getElementById(ids.login);
    let logoutB = document.getElementById(ids.logout);
    let callApiB = document.getElementById(ids.callApi);

    loginB.disabled = login;
    logoutB.disabled = logout;
    callApiB.disabled = callApi;
}

async function invokeCallApi() {
    let result = await callApi();
    let results = document.getElementById(ids.apiResults);
    if (Array.isArray(result)) {
        let list = document.createElement('ul');
        let listElements = result.map(e => createListElement(e));
        for (let element of listElements) {
            list.appendChild(element);
        }
        let heading = document.createElement('h2');
        heading.innerText = 'API call results';
        results.appendChild(heading);
        results.appendChild(list);
    } else {
        results.innerText = result;
    }

    function createListElement(element) {
        let node = document.createElement('li');
        node.innerText = element;
        return node;
    }
}