import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import React, { useCallback, useRef, useState } from 'react';
import clsx from 'clsx';
import { ChevronDownIcon } from '@primer/octicons-react';
import { useVisibilityObserver } from '../../hooks/useVisibilityObserver.js';
import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
import { useKeyboardEscape } from '../../hooks/useKeyboardEscape.js';
import { useWindowSize } from '../../hooks/useWindowSize.js';
import styles from './SubdomainNavBar.module.css';
export function NavigationVisbilityObserver({ children, className, ...rest }) {
    const navRef = useRef(null);
    const [visibilityMap] = useVisibilityObserver(navRef, children);
    const { isMedium } = useWindowSize();
    const showOverflow = Object.values(visibilityMap).includes(false);
    return (_jsxs("ul", { className: clsx(styles['SubdomainNavBar-primary-nav-list'], className), ref: navRef, ...rest, children: [React.Children.map(children, child => {
                return React.cloneElement(child, {
                    className: clsx(child.props.className, isMedium &&
                        !!visibilityMap[child.props['data-navitemid']] &&
                        styles['SubdomainNavBar-primary-nav-list-item--visible'], isMedium &&
                        !visibilityMap[child.props['data-navitemid']] &&
                        styles['SubdomainNavBar-primary-nav-list-item--invisible']),
                });
            }), showOverflow && (_jsx(AnchoredOverlay, { visibilityMap: visibilityMap, children: children }))] }));
}
function AnchoredOverlay({ children, className, visibilityMap, }) {
    const [anchorEl, setAnchorEl] = useState(null);
    const ref = useRef(null);
    useOnClickOutside(ref, () => handleClose());
    const open = Boolean(anchorEl);
    const handleClick = event => {
        if (anchorEl) {
            handleClose();
        }
        else {
            setAnchorEl(event.currentTarget);
        }
    };
    const handleClose = useCallback(() => {
        setAnchorEl(null);
    }, []);
    useKeyboardEscape(handleClose);
    return (_jsxs("li", { className: clsx(styles['SubdomainNavBar-primary-nav-list-item--overflow'], className), ref: ref, children: [_jsxs("button", { "aria-expanded": open ? 'true' : 'false', "aria-controls": "more-navigation", "aria-haspopup": "true", onClick: handleClick, className: clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-more-link']), children: ["More", _jsx(ChevronDownIcon, {})] }), _jsx("div", { id: "more-navigation", style: { display: open ? 'block' : 'none' }, className: clsx(styles['SubdomainNavBar-overflow-menu']), children: _jsx("ul", { className: clsx(styles['SubdomainNavBar-overflow-menu-list']), children: React.Children.map(children, child => {
                        if (React.isValidElement(child)) {
                            const navItemChild = child.props['data-navitemid'];
                            if (!visibilityMap[navItemChild]) {
                                return (_jsx(React.Fragment, { children: React.cloneElement(child, {
                                        onClick: handleClose,
                                        className: clsx(styles['SubdomainNavBar-overflow-menu-item'], child.props.className),
                                    }) }));
                            }
                        }
                        return null;
                    }) }) })] }));
}
