document.addEventListener("DOMContentLoaded", _ => 
{
    // check if the user is logged in and if so load the editor
    fetch("/api/user/isLoggedIn").then(res => 
    {
        if (res.ok)
        {
            window.location.href = "./editor.html";
        }
    });
});

function showErrorMessage(message, form) 
{
    document.querySelector(`#${form}Error`).classList.remove("hidden");
    document.querySelector(`#${form}Error div`).innerText = message;
}

function switchView(from, to)
{
    document.querySelector(from).classList.toggle("shown");
    setTimeout(() => document.querySelector(from).style.transform = "translateX(150vw)", 500);
    setTimeout(() => document.querySelector(from).style.display = "none", 500);
    setTimeout(() => document.querySelector(to).style.removeProperty("display"), 200);
    setTimeout(() => document.querySelector(to).classList.toggle("shown"), 300);
    setTimeout(() => document.querySelector(to).style.removeProperty("transform"), 400);
}

document.querySelector("#login form").addEventListener("submit", e => 
{
    e.preventDefault();
    let loginData = new FormData();
    if (e.target.username.value.length > 0 && e.target.password.value.length > 0)
    {
        loginData.append("username", e.target.username.value);
        loginData.append("password", e.target.password.value);
        fetch("/api/user/login", 
    {
            method: "POST", 
            body: loginData
        }).then(res => 
        {
            if (res.ok)
            {
                window.location.href = "./editor.html";
                return;
            }
            if (res.status === 400)
            {
                showErrorMessage("Please type in a username and password.", "login");
                return;
            }
            showErrorMessage("Invalid username or password.", "login");
        });
       return; 
    }
    showErrorMessage("Please type in a username and password.", "login");
});

document.querySelector("#loginError .close").addEventListener("click", () =>
    document.querySelector("#loginError").classList.toggle("hidden"));

// showing and hiding different forms

document.querySelector("#resetPwd").addEventListener("click", () =>
{
    switchView("#login", "#resetPassword");
});

document.querySelector("#loginBtn").addEventListener("click", () =>
{
    switchView("#resetPassword", "#login");
});

document.querySelector("#resetPassword form").addEventListener("submit", e =>
{
    e.preventDefault();
    let resetData = new FormData();
    if (e.target.email === "")
    {
       showErrorMessage("Please type in your email.", "reset");
       return;
    }
    window.email = e.target.email.value;
    resetData.append("email", e.target.email.value);
    fetch(`/api/user/checkResetEmail/${e.target.email.value}`).then(res =>
    {
        if (res.ok)
        {
            // show check code form 
            switchView("#resetPassword", "#checkResetCode");
        }
        showErrorMessage("Invalid email.", "reset");
    });
});

document.querySelector("#checkResetCode form").addEventListener("submit", e =>
{
    e.preventDefault();
    let resetCode = new FormData();
    if (e.target.code.value === "")
    {
        showErrorMessage("Please type in your reset code.", "check");
        return;
    }
    resetCode.append("code", e.target.code.value);
    fetch(`/api/user/checkResetCode//${e.target.code.value}`).then(res =>
    {
        if (res.ok)
        {
            // show reset password form
            switchView("#checkResetCode", "#changePassword");
        }
        showErrorMessage("Invalid code.", "resetCode");
    });

});