import { PAGE_ATTRIBUTE, createMenuButton } from "#presentation/components/menu.component";
import { ACTIVE_CLASS } from "#configuration/constants/element.constants";
import type { Disposer } from "#types/base.types";
import { MAIN_NAVIGATION_LABEL } from "#configuration/strings/menu.strings";
import { ROUTE_CHANGED } from "#core/ids/route.ids";
import { createElement } from "#core/factories/element.factory";
import { listPages } from "#domain/registries/page.registry";
import { subscribeEvent } from "#core/buses/base.bus";

const markActive = function markActive(container: Element, page: string): void {
    for (const item of container.querySelectorAll(`[${PAGE_ATTRIBUTE}]`)) {
        const active = item.getAttribute(PAGE_ATTRIBUTE) === page;
        item.classList.toggle(ACTIVE_CLASS, active);
        item.setAttribute("aria-current", active ? "page" : "false");
    }
};

export const mountMenu = function mountMenu(container: HTMLElement): Disposer {
    container.replaceChildren(
        createElement("nav", {
            attributes: { "aria-label": MAIN_NAVIGATION_LABEL },
            children: listPages().map(createMenuButton),
            className: "tab-bar",
        }),
    );
    const unsubscribe = subscribeEvent(ROUTE_CHANGED, (event) => {
        markActive(container, event.page);
    });
    return () => {
        unsubscribe();
        container.replaceChildren();
    };
};