import { GefestElement } from "../../modules/Gefest/element";
import { GefestA } from "../../modules/Gefest/primitives/a";
import { GefestCenter } from "../../modules/Gefest/primitives/center";
import { GefestHeader } from "../../modules/Gefest/primitives/header";
import { DefaultElement } from "../default-element";

export interface AuthenticationRules {
    type: "password"
};

type formType = "text" | "email" | "password" | "textarea";
function getFormItem (elementHtmlId: string, title: string, type: formType = "text", placeholder : string | null = null): DefaultElement {
    const label: DefaultElement = new (class extends DefaultElement {
        constructor() {
            super([
                title
            ]);
            this.addClass("form-label");
            this.setAttribute("for", elementHtmlId);
        }
        protected htmlTag = "label";
    });
    const input: DefaultElement = new (class extends DefaultElement {
        constructor() {
            super([]);
            this.id = elementHtmlId;
            this.addClass("form-control");
            if (!{
                text: true,
                email: true,
                password: true,
                textarea: false
            }[type]) {
                this.setAttribute("type", type);
            }
            if (placeholder !== null) {
                this.setAttribute("placeholder", placeholder);
            }
        }
        protected htmlTag = {
            text: "input",
            email: "input",
            password: "input",
            textarea: "textarea"
        }[type];
    });

    return new (class extends DefaultElement { constructor() { super([
        label, input
    ]); this.addClass("mb-3"); } });
}
class RegisterForm extends DefaultElement {
    link: GefestA;
    constructor(authRules : AuthenticationRules) {
        const header = new GefestHeader("Registration", 2);
        header.addClass("card-title");
        const link = new GefestA("Login to account");
        link.addClass("link-secondary");
        link.addClass("noselect");
        link.setPersonalStyle("cursor: pointer;");

        const args = [
            getFormItem("username", "Username"),
            getFormItem("password", "Password", "password"),
        ];
        switch (authRules.type) {
            case "password":
                args.push(getFormItem(
                    "serverPassword",
                    "Server Password",
                    "password"
                ));
                break;
        }

        super([
            new GefestCenter([header, link]),
            ...args
        ]);
        this.link = link;
        this.isHidden = true;
    }
}
class LoginForm extends DefaultElement {
    link: GefestA;
    constructor() {
        const header = new GefestHeader("Login", 2);
        header.addClass("card-title");
        const link = new GefestA("Create a new account");
        link.addClass("link-secondary");
        link.addClass("noselect");
        link.setPersonalStyle("cursor: pointer;");

        super([
            new GefestCenter([
                header, link
            ]),
            getFormItem("username", "Username"),
            getFormItem("password", "Password", "password"),
        ]);
        this.link = link;
    }
}
export class AuthenticationPage extends DefaultElement {
    constructor(authRules : AuthenticationRules) {
        const login = new LoginForm;
        const register = new RegisterForm(authRules);

        const update = () => {
            login.update();
            register.update();
        };
        login.link.onClick = () => {
            login.isHidden = true;
            register.isHidden = false;
            update();
        };
        register.link.onClick = () => {
            login.isHidden = false;
            register.isHidden = true;
            update();
        };

        super([
            new (class extends DefaultElement { constructor() { super([
                login,
                register
            ]); this.addClass("card-body"); } })
        ]);
        this.addClass("card");
        this.addClass("border");
        this.addClass("auth-card");
    }
}