"use strict";

let main, windows;
let defaultLocation = '/welcome';

function createWelcomeWindow() {
    let win = document.createElement("div");
    win.id = "welcome-win";

    win.innerHTML = `
        <h1>Welcome to Locutus!</h1>
        <a href="#/login" class="button">Login</a>`;

    while (windows.lastChild) windows.removeChild(windows.lastChild);
    windows.appendChild(win);
}

function createLoginWindow() {
    let win = document.createElement("div");
    win.id = "login-win";

    win.innerHTML = `
        <h1>Login to USIMP Account</h1>
        <form>
            <input name="account" placeholder="Account name" type="text" required/>
            <input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/>
            <input name="password" placeholder="Password" type="password" required/>
            <button type="submit">Login</button>
        </form>`;

    win.getElementsByTagName("form")[0].addEventListener("submit", (evt) => {
        evt.preventDefault();
        let form = evt.target;
        for (let e of form) e.disabled = true;

        for (let d of form.getElementsByTagName("div")) {
            form.removeChild(d);
        }

        usimp.lookup(form.domain.value)
            .then(res => {
                if (res.ok) {
                    res.json()
                        .then(data => console.log(data))
                        .catch(reason => console.error(reason))
                } else {
                    document.getElementsByName("domain")[0].setAttribute("invalid", "invalid");
                    let div = document.createElement("div");
                    div.classList.add("error");
                    div.innerText = "Invalid USIMP domain";
                    form.appendChild(div);
                }
            })
            .catch(reason => {
                document.getElementsByName("domain")[0].setAttribute("invalid", "invalid");
                let div = document.createElement("div");
                div.classList.add("error");
                div.innerText = "Invalid USIMP domain";
                form.appendChild(div);
            })
            .finally(() => {
                for (let e of form) e.disabled = false;
            });
    });

    while (windows.lastChild) windows.removeChild(windows.lastChild);
    windows.appendChild(win);

    document.getElementsByName("domain")[0].addEventListener("input", (evt) => {
        evt.target.removeAttribute("invalid");
    });

    document.getElementsByName("account")[0].focus();
}

function handleHash(hash) {
    if (hash[0] === '#') hash = hash.substr(1);

    switch (hash) {
        case "/welcome": createWelcomeWindow(); break;
        case "/login": createLoginWindow(); break;
        default:
            console.warn(`Invalid url hash #${hash}`);
            history.replaceState(null, null, `#${defaultLocation}`);
            handleHash(defaultLocation)
            return;
    }

    let url = new URL(document.URL);
    url.hash = hash;
    location.href = url.toString();
}

function handleUrl(url) {
    handleHash(new URL(url).hash);
}

window.addEventListener("DOMContentLoaded", (evt) => {
    main = document.getElementsByTagName("main")[0];
    windows = document.getElementById("windows");

    // Remove <noscript> tag
    document.getElementsByTagName("noscript")[0].remove();

    handleUrl(document.URL)
});

window.addEventListener("hashchange", (evt) => {
    handleUrl(evt.newURL);
});