import React, { useState, useEffect, } from "react";
import IconProp from "../../../Types/Icon/IconProp";
import NavBarItem from "./NavBarItem";
import NavBarMenuModal from "./NavBarMenuModal";
import Button, { ButtonStyleType } from "../Button/Button";
import Navigation from "../../Utils/Navigation";
import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
import Icon, { ThickProp } from "../Icon/Icon";
const Navbar = (props) => {
    var _a, _b, _c;
    const [isMobile, setIsMobile] = useState(false);
    const [isMobileMenuVisible, setIsMobileMenuVisible] = useState(false);
    const [isMoreMenuVisible, setIsMoreMenuVisible] = useState(false);
    // Use the existing outside click hook for mobile menu
    const { ref: mobileMenuRef, isComponentVisible: isMobileMenuOpen, setIsComponentVisible: setIsMobileMenuOpen, } = useComponentOutsideClick(false);
    // Sync local state with hook state
    useEffect(() => {
        setIsMobileMenuVisible(isMobileMenuOpen);
    }, [isMobileMenuOpen]);
    // Check if we're on mobile
    useEffect(() => {
        const checkMobile = () => {
            setIsMobile(window.innerWidth < 768); // md breakpoint
        };
        checkMobile();
        window.addEventListener("resize", checkMobile);
        return () => {
            return window.removeEventListener("resize", checkMobile);
        };
    }, []);
    // Open/close the products menu with Cmd/Ctrl + K from anywhere.
    useEffect(() => {
        const handleGlobalKeyDown = (event) => {
            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
                event.preventDefault();
                setIsMoreMenuVisible((visible) => {
                    return !visible;
                });
            }
        };
        document.addEventListener("keydown", handleGlobalKeyDown);
        return () => {
            document.removeEventListener("keydown", handleGlobalKeyDown);
        };
    }, []);
    // More menu open/close.
    const openMoreMenu = () => {
        setIsMoreMenuVisible(true);
    };
    const closeMoreMenu = () => {
        setIsMoreMenuVisible(false);
    };
    // Legacy support: if children are provided, render the old way
    if (props.children) {
        const className = props.className || "flex text-center lg:space-x-8 lg:py-2 bg-white ";
        return (React.createElement("nav", { className: props.rightElement ? `flex justify-between` : "" },
            React.createElement("div", { "data-testid": "nav-children", className: className }, props.children),
            props.rightElement && (React.createElement("div", { className: className },
                React.createElement(NavBarItem, { title: props.rightElement.title, icon: props.rightElement.icon, route: props.rightElement.route, activeRoute: props.rightElement.activeRoute, exact: (_a = props.rightElement.exact) !== null && _a !== void 0 ? _a : false })))));
    }
    // New props-based implementation
    if (!props.items || props.items.length === 0) {
        return React.createElement(React.Fragment, null);
    }
    // Build all nav items including more menu items for mobile
    const allNavItems = [...props.items];
    if (props.moreMenuItems) {
        allNavItems.push(...props.moreMenuItems.map((item) => {
            return {
                id: `more-${item.title.toLowerCase().replace(/\s+/g, "-")}`,
                title: item.title,
                icon: item.icon,
                route: item.route,
                description: item.description,
            };
        }));
    }
    // Add right element to mobile menu
    if (props.rightElement) {
        allNavItems.push({
            id: `right-${props.rightElement.title.toLowerCase().replace(/\s+/g, "-")}`,
            title: props.rightElement.title,
            icon: props.rightElement.icon,
            route: props.rightElement.route,
            activeRoute: props.rightElement.activeRoute,
            exact: props.rightElement.exact,
        });
    }
    // Find the currently active item
    const activeItem = allNavItems.find((item) => {
        const routeToCheck = item.activeRoute || item.route;
        return item.exact
            ? Navigation.isOnThisPage(routeToCheck)
            : Navigation.isStartWith(routeToCheck);
    }) || allNavItems[0];
    // Mobile view
    if (isMobile && activeItem) {
        return (React.createElement("div", { className: "relative md:hidden" },
            React.createElement("nav", { className: "bg-white text-center justify-between py-2 mt-5" },
                React.createElement("div", { className: "flex items-center justify-between w-full" },
                    React.createElement(NavBarItem, { id: activeItem.id, title: activeItem.title, icon: activeItem.icon, exact: true, route: undefined, onClick: () => {
                            return setIsMobileMenuOpen(!isMobileMenuVisible);
                        }, isRenderedOnMobile: true }),
                    React.createElement(Button, { buttonStyle: ButtonStyleType.OUTLINE, onClick: () => {
                            return setIsMobileMenuOpen(!isMobileMenuVisible);
                        }, className: "ml-2 p-2", icon: isMobileMenuOpen ? IconProp.Close : IconProp.Bars3, dataTestId: "mobile-nav-toggle" }))),
            isMobileMenuOpen && (React.createElement("div", { ref: mobileMenuRef, className: "absolute top-full left-0 right-0 z-50 mt-1 transition-all duration-200 ease-in-out" },
                React.createElement("nav", { className: "bg-white rounded-lg shadow-lg px-3 py-3 space-y-1 border border-gray-200" }, allNavItems.map((item) => {
                    var _a;
                    return (React.createElement("div", { key: item.id, className: "block w-full" },
                        React.createElement(NavBarItem, { id: item.id, title: item.title, icon: item.icon, exact: (_a = item.exact) !== null && _a !== void 0 ? _a : false, route: item.route, activeRoute: item.activeRoute, onClick: () => {
                                return setIsMobileMenuOpen(false);
                            }, isRenderedOnMobile: true })));
                }))))));
    }
    // Desktop view
    const className = props.className ||
        "bg-white flex text-center items-center lg:py-2 hidden md:flex";
    // Find active item in more menu items (needed for breadcrumb)
    const activeMoreItem = (_b = props.moreMenuItems) === null || _b === void 0 ? void 0 : _b.find((item) => {
        const routeToCheck = item.activeRoute || item.route;
        return Navigation.isStartWith(routeToCheck);
    });
    /*
     * Find Home item from navItems. Match by id so this keeps working when the
     * title is translated to a non-English language.
     */
    const homeItem = props.items.find((item) => {
        return item.id === "home-nav-bar-item";
    });
    const otherNavItems = props.items.filter((item) => {
        return item.id !== "home-nav-bar-item";
    });
    return (React.createElement("nav", { className: props.rightElement ? `flex justify-between items-center` : "" },
        React.createElement("div", { "data-testid": "nav-children", className: className },
            React.createElement("div", { className: "flex items-center" },
                homeItem && (React.createElement(NavBarItem, { key: homeItem.id, id: homeItem.id, title: homeItem.title, icon: homeItem.icon, activeRoute: homeItem.activeRoute, route: homeItem.route, exact: true })),
                activeMoreItem && (React.createElement(React.Fragment, null,
                    React.createElement("span", { className: "text-gray-400 mx-1" }, "/"),
                    React.createElement("button", { onClick: openMoreMenu, className: "group bg-gray-100 text-gray-900 hover:bg-gray-200 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer" },
                        React.createElement(Icon, { icon: activeMoreItem.icon, className: "mr-1.5 h-4 w-4 transition-transform duration-150 group-hover:scale-110", thick: ThickProp.Thick }),
                        React.createElement("span", null, activeMoreItem.title),
                        React.createElement(Icon, { icon: IconProp.ChevronDown, className: `ml-1.5 h-3 w-3 text-gray-500 transition-transform duration-200 ${isMoreMenuVisible ? "rotate-180" : ""}` })))),
                !activeMoreItem &&
                    props.moreMenuItems &&
                    props.moreMenuItems.length > 0 && (React.createElement(React.Fragment, null,
                    React.createElement("span", { className: "text-gray-400 mx-1" }, "/"),
                    React.createElement("button", { onClick: openMoreMenu, className: "group text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer" },
                        React.createElement(Icon, { icon: IconProp.Squares, className: "mr-1.5 h-4 w-4 transition-transform duration-150 group-hover:scale-110 group-hover:text-indigo-600", thick: ThickProp.Thick }),
                        React.createElement("span", null, props.moreMenuTitle || "Products"),
                        React.createElement(Icon, { icon: IconProp.ChevronDown, className: `ml-1.5 h-3 w-3 text-gray-400 transition-transform duration-200 ${isMoreMenuVisible ? "rotate-180" : ""}` }))))),
            otherNavItems.map((item) => {
                var _a;
                return (React.createElement(NavBarItem, { key: item.id, id: item.id, title: item.title, icon: item.icon, activeRoute: item.activeRoute, route: item.route, exact: (_a = item.exact) !== null && _a !== void 0 ? _a : false }));
            })),
        props.rightElement && (React.createElement("div", { className: className },
            React.createElement(NavBarItem, { title: props.rightElement.title, icon: props.rightElement.icon, route: props.rightElement.route, activeRoute: props.rightElement.activeRoute, exact: (_c = props.rightElement.exact) !== null && _c !== void 0 ? _c : false }))),
        isMoreMenuVisible &&
            props.moreMenuItems &&
            props.moreMenuItems.length > 0 && (React.createElement(NavBarMenuModal, { items: props.moreMenuItems, footer: props.moreMenuFooter, searchPlaceholder: props.moreMenuSearchPlaceholder, noResultsText: props.moreMenuNoResultsText, keyboardHint: props.moreMenuKeyboardHint, recentLabel: props.moreMenuRecentLabel, onClose: closeMoreMenu }))));
};
export default Navbar;
//# sourceMappingURL=NavBar.js.map