import { GefestA } from "../modules/Gefest/primitives/a";
import { GefestI } from "../modules/Gefest/primitives/i";
import { DefaultElement } from "./default-element";

type FontAwesomeGroup = "fas" | "far" | "fab"; // e.g. "fas fa-home"
type FontAwesomeIcon = `${FontAwesomeGroup} fa-${string}`;

class NavbarButton extends DefaultElement {
    constructor(icon: FontAwesomeIcon) {
        const iconElement = new GefestI("");
        iconElement.addClass(icon);
        const elementA = new GefestA([
            iconElement
        ]);
        elementA.addClass("linked-btn");
        elementA.addClass("noselect");
        elementA.addClass("nav-link");
        elementA.setAttribute("aria-current", "page");
        super([ elementA ]);
        this.addClass("nav-item");
        this.setPersonalStyle("cursor: pointer; padding: 12px 24px; font-size: 1.5em;");
    }

    protected wrapHTML(content: string): string {
        const attrString = this.attributesToString();
        return `<li ${attrString}>${content}</li>`;
    }
}

class NavbarItemContainerUL extends DefaultElement {
    constructor() {
        // Buttons HERE!!!
        const newsButton = new NavbarButton("fas fa-rss-square");
        newsButton.onClick = () => alert("News clicked!") as void;

        const chatButton = new NavbarButton("fas fa-comments");
        chatButton.onClick = () => alert("Chat clicked!") as void;

        super([
            newsButton,
            chatButton
        ]);
        this.addClass("navbar-nav");
    }

    protected wrapHTML(content: string): string {
        const attrString = this.attributesToString();
        return `<ul ${attrString}>${content}</ul>`;
    }
}

class NavbarItemContainer extends DefaultElement {
    constructor() {
        super([
            new NavbarItemContainerUL()
        ]);
        this.addClass("central-navbar");
        this.addClass("collapse");
        this.addClass("navbar-collapse");
        this.addClass("noselect");
    }
}

export class Navbar extends DefaultElement {
    constructor() {
        super([
            new NavbarItemContainer()
        ]);
        this.addClass("navbar");
        this.addClass("navbar-expand-lg");
        this.addClass("noselect");
        this.addClass("fixed-bottom");
        this.addClass("border-top");
    }

    protected wrapHTML(content: string): string {
        const attrString = this.attributesToString();
        return `<nav ${attrString}>${content}</nav>`;
    }
}