import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Tag } from '@rspress/core/theme';
import { isExternalUrl, withoutBase, } from '@rspress/shared';
import { useCallback, useState } from 'react';
import { SvgDown } from './Down.js';
import { NavMenuSingleItem, } from './NavMenuSingleItem.js';
import { SvgWrapper } from './SvgWrapper.js';
function ActiveGroupItem({ item }) {
    return (_jsxs("div", { className: "rounded-2xl my-1 flex", style: {
            padding: '0.4rem 1.5rem 0.4rem 0.75rem',
        }, children: [item.tag && _jsx(Tag, { tag: item.tag }), _jsx("span", { className: "text-brand", children: item.text })] }, item.link));
}
function NormalGroupItem({ item }) {
    return (_jsx("div", { className: "font-medium my-1", children: _jsx("a", { href: item.link, target: isExternalUrl(item.link) ? '_blank' : undefined, rel: "noopener noreferrer", children: _jsx("div", { className: "rounded-2xl hover:bg-mute", style: {
                    padding: '0.4rem 1.5rem 0.4rem 0.75rem',
                }, children: _jsxs("div", { className: "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 = '', pathname = '' } = item;
    const [isOpen, setIsOpen] = useState(false);
    const onOpen = useCallback(() => {
        setIsOpen(true);
    }, []);
    const onClose = useCallback(() => {
        setIsOpen(false);
    }, []);
    const renderLinkItem = (item) => {
        const isLinkActive = new RegExp(item.activeMatch || item.link).test(withoutBase(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: "font-bold text-gray-400 my-1 not:first:border", children: item.text })), item.items.map(renderLinkItem)] }));
    };
    const hasMultiItems = groupItems.length > 1;
    const Content = hasMultiItems || item.link ? 'button' : 'span';
    const content = (_jsx(Content, { onMouseEnter: hasMultiItems ? onOpen : undefined, className: `${Content === 'button' ? 'rspress-nav-menu-group-button ' : ''}flex-center items-center font-medium text-sm text-text-1${hasMultiItems ? ' hover:text-text-2 transition-colors duration-200' : ''}`, children: item.link ? (_jsx(NavMenuSingleItem, { ...item, rightIcon: _jsx(SvgWrapper, { icon: SvgDown }) })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-sm font-medium flex", style: hasMultiItems ? { marginRight: '2px' } : undefined, children: [_jsx(Tag, { tag: item.tag }), item.text] }), hasMultiItems && _jsx(SvgWrapper, { icon: SvgDown })] })) }));
    return hasMultiItems ? (_jsxs("div", { className: "relative flex-center h-14", onMouseLeave: onClose, children: [content, _jsx("div", { className: "rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300", style: {
                    opacity: isOpen ? 1 : 0,
                    visibility: isOpen ? 'visible' : 'hidden',
                    right: 0,
                    top: '52px',
                }, children: _jsx("div", { className: "p-3 pr-2 w-full h-full max-h-100vh 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))) }) })] })) : (content);
}
