async function login() {
    // tell the user the app is loading
    document.getElementById("loginSubmit").value = "Loading";
    // this.preventDefault();
    // get login details
    let name = document.getElementById("name").value;
    let password = document.getElementById("password").value;
    // request login
    let response = await fetch("/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: name,
            password: password
        })
    });
    // if failed red button
    // else switch screen
    if (response.status !== 200) {
        document.getElementById("loginSubmit").classList.add("error");
        document.getElementById("loginSubmit").value = "Failed";
        return;
    } else {
        // switch screen
        document.getElementById("login").setAttribute("style", "display: none;");
        document.getElementById("mainPage").setAttribute("style", "");
    }

    // store user data in session storage
    let data = await response.json();
    sessionStorage.setItem("name", data.name);
    sessionStorage.setItem("role", data.role);

    // if role is admin, keep auto styling
    if (sessionStorage.getItem("role") !== "admin") {
        document.getElementById("addButton").setAttribute("style", "display: none;");
        document.getElementById("taskButton").classList.value = "half";
        document.getElementById("historyButton").classList.value = "half";
        document.getElementById("menu").classList.value = "flex two";
    }

    await populateScreen();
}

async function populateScreen() {
    // get task data
    let taskPage = document.getElementById("tasks");
    let response = await fetch("/getTasks");
    let tasksRaw = await response.json();
    let tasks = tasksRaw.tasks;

    // get historical data
    let historyPage = document.getElementById("history");
    response = await fetch("/getHistory");
    let historyRaw = await response.json();
    let history = historyRaw.history;
    for (let i = 0; i < tasks.length; i++) {
        taskPage.innerHTML += `
        <div class="half">
            <article class="card">
                <header>
                    <p>${tasks[i].name}</p>
                    <p>${tasks[i].points}</p>
                </header>
            </article>
        </div>`
    }
    for (let i = history.length; i > 0; i-=1) {
        historyPage.innerHTML += `
        <div class="full">
            <article class="card">
                <header>
                    <p>User: ${history[i].user}</p>
                    <p>Task: ${history[i].task}</p>
                    <p>Time: ${history[i].time}</p>
                    <p>Points gained: ${history[i].pointsGained}</p>
                </header>   
            </article>
        </div>`
    }
}

function switchScreen(button) {
    document.getElementById("tasks").setAttribute("style", "display: none;");
    document.getElementById("history").setAttribute("style", "display: none;");
    document.getElementById("addTask").setAttribute("style", "display: none;");

    if (button === "task") {
        document.getElementById("tasks").setAttribute("style", "");
    } else if (button === "history") {
        document.getElementById("history").setAttribute("style", "");
    } else if (button === "add") {
        document.getElementById("addTask").setAttribute("style", "");
    }
}