const form = document.querySelector("form");
let errorEL = document.querySelector("#error");
let titleEl = document.querySelector("#title");
let messageEl = document.querySelector("#message");
const loginBtn = document.querySelector("#login-btn");
let returnUrl = new URL(location.href).searchParams.get("ReturnUrl");
if(!returnUrl) location.href = "http://localhost:3000";
form.addEventListener("submit", () => {
    const username = document.querySelector("#username").value;
    const password = document.querySelector("#password").value;
    const persist = document.querySelector("#persist").checked;

    let data = {
        username,
        password,
        returnUrl,
        persist,
    };

    Util.addClass(loginBtn, "btn--state-b");

    fetch("/account/login", {
        method: "POST",
        body: JSON.stringify(data),
        credentials: "include",
        headers: {
            "Content-Type": "application/json;charset=utf-8",
            RequestVerificationToken: document.querySelector(
                "input[name='__RequestVerificationToken']"
            ).value,
        },
    })
        .then((response) => {
            if (response.status === 400) {
                response.json().then((res) => {
                    if (res.title && res.message) {
                        displayError(res.title, res.message);
                    }
                });
            } else {
                location.href = returnUrl;
            }
        })
        .catch((error) => console.error(error));
});

function displayError(title, message) {
    titleEl.innerText = title;
    messageEl.innerText = message;
    Util.addClass(errorEL, "alert--is-visible");
    Util.addClass(errorEL, "alert--error");
}

function hideError() {
    Util.removeClass(errorEL, "alert--is-visible");
    Util.removeClass(errorEL, "alert--error");
}

let alertClose = document.getElementsByClassName("js-alert__close-btn");
if (alertClose.length > 0) {
    for (let i = 0; i < alertClose.length; i++) {
        (function (i) {
            initAlertEvent(alertClose[i]);
        })(i);
    }
}

function initAlertEvent(element) {
    element.addEventListener("click", function (event) {
        event.preventDefault();
        Util.removeClass(element.closest(".js-alert"), "alert--is-visible");
    });
}