import { ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import type { PageEntry } from "#types/page.types";
import { ROUTE_REQUESTED } from "#core/ids/route.ids";
import { createElement } from "#core/factories/element.factory";
import { emitEvent } from "#core/buses/base.bus";

export const PAGE_ATTRIBUTE = "data-page";

export const createMenuButton = function createMenuButton(page: PageEntry): HTMLButtonElement {
    const button = createElement("button", {
        attributes: { [PAGE_ATTRIBUTE]: page.id, title: page.title, type: "button" },
        children: [
            createElement("i", { className: `${ICON_BASE_CLASS} ${page.icon}` }),
            createElement("span", { className: "tab-label", text: page.title }),
        ],
        className: page.accent === undefined ? "tab-button" : `tab-button ${page.accent}`,
    });
    button.addEventListener("click", () => {
        emitEvent({ name: ROUTE_REQUESTED, page: page.id });
    });
    return button;
};