import { LightningElement, api } from "lwc";
import { TabVariant, OptionWithNested } from "typings/custom";
export default class HeaderNav extends LightningElement {
    @api pathname: string | null = null;
    @api variant: TabVariant = "default";
    @api ariaLabel: string = "Primary Navigation";

    @api
    set navItems(_navItems: OptionWithNested[]) {
        this._navItems = _navItems;
    }

    get navItems() {
        const activeItem = this._navItems
            .filter((navItem: OptionWithNested) => {
                if (!navItem.link || navItem.link.href === "/") {
                    return false;
                }

                const fileExtension = navItem.link.href.match(/\.[0-9a-z]+$/i);
                const baseLink = fileExtension
                    ? navItem.link.href.substring(
                          0,
                          navItem.link.href.lastIndexOf("/")
                      )
                    : navItem.link.href;
                return this.pathname?.includes(baseLink);
            })
            .sort(
                (a, b) =>
                    (b.link?.href.length || 0) - (a.link?.href.length || 0)
            )[0];

        const items = this._navItems.map((navItem: OptionWithNested) =>
            navItem.link
                ? {
                      ...navItem,
                      isActive:
                          navItem.link.href === this.pathname ||
                          navItem.id === activeItem?.id
                  }
                : navItem
        );

        return items;
    }

    private _navItems: OptionWithNested[] = [];
    private ANALYTICS_PAYLOAD = {
        nav_level: "2",
        nav_type: "global"
    };

    private requestOpenNavMenu(e: PointerEvent) {
        const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(
            "data-id"
        );
        this.dispatchEvent(new CustomEvent("requestopennavmenu", { detail }));
    }
}