import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useCallback, useMemo, useRef, useState, } from "react";
import { v4 as uuid } from "uuid";
import { bem } from "../@utils/bem.js";
const { b, e } = bem("gd-ui-kit-navigation-bypass");
/**
 * @internal
 */
export function UiNavigationBypass({ label, items, onItemClick, style }) {
    const [isFocused, setIsFocused] = useState(false);
    const containerRef = useRef(null);
    const contentRef = useRef(null);
    const focusedRef = useRef(null);
    const handleFocus = useCallback(() => {
        setIsFocused(true);
    }, []);
    const handleBlur = useCallback((event) => {
        if (containerRef.current && !containerRef.current.contains(event.relatedTarget)) {
            setIsFocused(false);
        }
    }, []);
    const handleKeyDown = useCallback((event) => {
        if (!isFocused) {
            return;
        }
        const current = focusedRef.current;
        const children = contentRef.current?.children;
        if (children && current && event.key === "ArrowDown") {
            const i = Array.prototype.indexOf.call(children, current) + 1;
            const next = (i >= children.length ? children[0] : children[i]);
            if (next) {
                next.focus();
            }
            event.preventDefault();
        }
        if (children && current && event.key === "ArrowUp") {
            const i = Array.prototype.indexOf.call(children, current) - 1;
            const next = (i < 0 ? children[children.length - 1] : children[i]);
            if (next) {
                next.focus();
            }
            event.preventDefault();
        }
    }, [isFocused]);
    const handleItemClick = useCallback((item) => {
        // Handle click on item callback if provided
        if (onItemClick) {
            onItemClick(item);
            return;
        }
        // By default, focus the target element by id
        const targetElement = document.getElementById(item.targetId);
        if (targetElement) {
            targetElement.focus();
        }
    }, [onItemClick]);
    const handleItemFocus = useCallback((el) => {
        focusedRef.current = el;
    }, []);
    const labelId = useMemo(() => {
        const hash = uuid().substring(0, 5);
        return `nb-${hash}`;
    }, []);
    return (_jsxs(_Fragment, { children: [
            _jsx("nav", { className: b(), style: style, ref: containerRef, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-labelledby": labelId, children: _jsx("div", { className: e("dropdown", { isFocused }), ref: contentRef, children: items.map((item) => (_jsx(UiNavigationItem, { item: item, onItemClick: handleItemClick, onItemFocus: handleItemFocus }, item.id))) }) }), _jsx("span", { style: { display: "none" }, id: labelId, children: label })
        ] }));
}
function UiNavigationItem({ item, onItemClick, onItemFocus }) {
    const { id, name, tabIndex } = item;
    const handleClick = useCallback((event) => {
        event.preventDefault();
        onItemClick(item);
    }, [onItemClick, item]);
    const handleKeyDown = useCallback((event) => {
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            onItemClick(item);
        }
    }, [onItemClick, item]);
    const handleFocus = useCallback((e) => {
        onItemFocus(e.target);
    }, [onItemFocus]);
    return (_jsx("a", { role: "link", tabIndex: tabIndex ?? 0, className: e("dropdown-item"), onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: handleClick, children: name }, id));
}
