export class fenetre {
    constructor(width = 320, height = 220, title = "Window") {
        this.main = document.createElement("div");
        this.main.style.width = width + "px";
        this.main.style.height = height + "px";
        this.main.style.position = "fixed";
        this.main.style.top = "50%";
        this.main.style.left = "50%";
        this.main.style.transform = "translate(-50%, -50%)";
        this.main.style.backgroundColor = "#000";
        this.main.style.border = "2px ridge white";
        this.main.style.color = "white";
        this.main.style.zIndex = "100";
        this.main.style.display = "none";

        // Header
        this.header = document.createElement("div");
        this.header.innerText = title;
        this.header.style.padding = "6px";
        this.header.style.background = "#222";
        this.header.style.cursor = "move";

        // Close
        this.closeBtn = document.createElement("span");
        this.closeBtn.innerText = "✖";
        this.closeBtn.style.float = "right";
        this.closeBtn.style.cursor = "pointer";
        this.closeBtn.onclick = () => this.hide();

        this.header.appendChild(this.closeBtn);

        // Body
        this.body = document.createElement("div");
        this.body.style.padding = "10px";

        this.main.append(this.header, this.body);
        document.body.appendChild(this.main);
    }

    show() {
        this.main.style.display = "block";
    }

    hide() {
        this.main.style.display = "none";
    }
}

export class LoginWindow extends fenetre {
    constructor() {
        super(320, 240, "Connexion");

        this.mode = "login"; // login | register

        this.username = document.createElement("input");
        this.username.placeholder = "Username";

        this.password = document.createElement("input");
        this.password.type = "password";
        this.password.placeholder = "Password";

        this.submit = document.createElement("button");
        this.submit.innerText = "Se connecter";

        this.switch = document.createElement("button");
        this.switch.innerText = "S'inscrire";

        this.message = document.createElement("div");
        this.message.style.fontSize = "0.8em";

        this.body.append(
            this.username,
            this.password,
            this.submit,
            this.switch,
            this.message
        );

        this.applyStyles();
        this.bindEvents();
    }

    applyStyles() {
        this.body.style.display = "flex";
        this.body.style.flexDirection = "column";
        this.body.style.gap = "8px";
    }

    bindEvents() {
        this.switch.onclick = () => this.toggleMode();

        this.submit.onclick = () => {
            this.message.innerText =
                this.mode === "login"
                    ? "Tentative de connexion..."
                    : "Tentative d'inscription...";
        };
    }

    toggleMode() {
        if (this.mode === "login") {
            this.mode = "register";
            this.header.firstChild.textContent = "Inscription";
            this.submit.innerText = "S'inscrire";
            this.switch.innerText = "Se connecter";
        } else {
            this.mode = "login";
            this.header.firstChild.textContent = "Connexion";
            this.submit.innerText = "Se connecter";
            this.switch.innerText = "S'inscrire";
        }
    }
}