import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { isExternalUrl, } from '@rspress/shared';
import { useRef, useState } from 'react';
import { Tag } from 'rspress/theme';
import { matchNavbar } from '../../shared/index.js';
import { Down } from './Down.js';
import { NavMenuSingleItem, } from './NavMenuSingleItem.js';
import { SvgWrapper } from './SvgWrapper.js';
function ActiveGroupItem({ item }) {
    return (_jsxs("div", { className: "rp-rounded-2xl rp-my-1 rp-flex", style: {
            padding: '0.4rem 1.5rem 0.4rem 0.75rem',
        }, children: [item.tag && _jsx(Tag, { tag: item.tag }), _jsx("span", { className: "rp-text-brand", children: item.text })] }, item.link));
}
function NormalGroupItem({ item }) {
    return (_jsx("div", { className: "rp-font-medium rp-my-1", children: _jsx("a", { href: item.link, target: isExternalUrl(item.link) ? '_blank' : undefined, rel: "noopener noreferrer", children: _jsx("div", { className: "rp-rounded-2xl hover:rp-bg-mute", style: {
                    padding: '0.4rem 1.5rem 0.4rem 0.75rem',
                }, children: _jsxs("div", { className: "rp-flex", children: [item.tag && _jsx(Tag, { tag: item.tag }), _jsx("span", { children: item.text })] }) }) }) }, item.link));
}
export function NavMenuGroup(item) {
    const { activeValue, items: groupItems, base = '', link = '', pathname = '', } = item;
    const [isOpen, setIsOpen] = useState(false);
    const closeTimerRef = useRef(null);
    const clearCloseTimer = () => {
        if (closeTimerRef.current) {
            clearTimeout(closeTimerRef.current);
            closeTimerRef.current = null;
        }
    };
    /**
     * Handle mouse leave event for the dropdown menu
     * Closes the menu after a 150ms delay to allow diagonal mouse movement
     * to the dropdown content area
     */
    const handleMouseLeave = () => {
        closeTimerRef.current = window.setTimeout(() => {
            setIsOpen(false);
        }, 150);
    };
    const handleMouseEnter = () => {
        clearCloseTimer();
        setIsOpen(true);
    };
    const renderLinkItem = (item) => {
        const isLinkActive = matchNavbar(item, pathname, base);
        if (activeValue === item.text || (!activeValue && isLinkActive)) {
            return _jsx(ActiveGroupItem, { item: item }, item.link);
        }
        return _jsx(NormalGroupItem, { item: item }, item.link);
    };
    const renderGroup = (item) => {
        return (_jsxs("div", { children: ['link' in item ? (renderLinkItem(item)) : (_jsx("p", { className: "rp-font-bold rp-text-gray-400 rp-my-1 not:first:rp-border", children: item.text })), item.items.map(renderLinkItem)] }));
    };
    return (_jsxs("div", { className: "rp-relative rp-flex rp-items-center rp-justify-center rp-h-14", onMouseLeave: handleMouseLeave, children: [_jsx("div", { onMouseEnter: handleMouseEnter, className: "rspress-nav-menu-group-button rp-flex rp-justify-center rp-items-center rp-font-medium rp-text-sm rp-text-text-1 hover:rp-text-text-2 rp-transition-colors rp-duration-200 rp-cursor-pointer", children: link ? (_jsx(NavMenuSingleItem, { ...item, rightIcon: _jsx(SvgWrapper, { icon: Down }) })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "rp-text-sm rp-font-medium rp-flex", style: {
                                marginRight: '2px',
                            }, children: [_jsx(Tag, { tag: item.tag }), item.text] }), _jsx(SvgWrapper, { icon: Down })] })) }), _jsx("div", { className: "rspress-nav-menu-group-content rp-absolute rp-mx-0.8 rp-transition-opacity rp-duration-300", style: {
                    opacity: isOpen ? 1 : 0,
                    visibility: isOpen ? 'visible' : 'hidden',
                    right: 0,
                    top: '52px',
                }, onMouseEnter: clearCloseTimer, children: _jsx("div", { className: "rp-p-3 rp-pr-2 rp-w-full rp-h-full rp-max-h-100vh rp-whitespace-nowrap", style: {
                        boxShadow: 'var(--rp-shadow-3)',
                        zIndex: 100,
                        border: '1px solid var(--rp-c-divider-light)',
                        borderRadius: 'var(--rp-radius-large)',
                        background: 'var(--rp-c-bg)',
                    }, children: groupItems.map((item) => (_jsx("div", { children: 'items' in item ? renderGroup(item) : renderLinkItem(item) }, item.text))) }) })] }));
}
