/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs } from 'preact/jsx-runtime';
import { createRef } from 'preact';
import { useRef, useState, useCallback, useMemo } from 'preact/hooks';
import { c as classNames } from './classNames-4e12b00d.js';
import { T as TabBar } from './TabBar-4d7054f7.js';
import { styles } from './UNSAFE_OverflowTabBar/themes/OverflowTabBarStyles.css.js';
import { u as useDetectHorizontalOverflow } from './useDetectHorizontalOverflow-eeb05050.js';
import { R as RemovableTabBarItem } from './RemovableTabBarItem-60574a52.js';
import { T as TabBarItem } from './TabBarItem-b97091e4.js';
import { O as OverflowTabBarItem } from './OverflowTabBarItem-a578401b.js';

/**
 * OverflowTabBar handles the rendering of overflowing tab items.
 */
function OverflowTabBar({ items, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, truncation, onSelect, onRemove, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, testId }) {
    const displayStackProps = {
        display: display
    };
    const displayNonStackProps = {
        display: display,
        size: size
    };
    const displayProps = display === 'stacked' ? displayStackProps : displayNonStackProps;
    const rootRef = useRef(null);
    const tabBarRef = createRef();
    const [isDropDownOpen, setIsDropDownOpen] = useState(false);
    const isOutsideMouseDown = useRef(false);
    const handleClose = (e) => {
        if (tabBarRef.current && ['itemAction', 'dismissed'].includes(e.reason)) {
            tabBarRef?.current?.focus();
        }
        if (e.reason === 'outsideMousedown') {
            isOutsideMouseDown.current = true;
        }
        setIsDropDownOpen(false);
    };
    const handleSelect = useCallback((e) => {
        if (e.value === 'more') {
            //If overflow item is clicked after dropdown is open, the reason is outsideMouseDown and it needs to be closed
            if (isOutsideMouseDown.current) {
                setIsDropDownOpen(false);
            }
            else {
                setIsDropDownOpen(true);
            }
        }
        else {
            onSelect?.(e);
        }
        isOutsideMouseDown.current = false;
    }, [onSelect]);
    const overflowItemKey = 'more';
    const keysArray = useMemo(() => items.map((item) => item.itemKey), [items]);
    const { visibleItemKeys, overflowItemKeys, maxWidths } = useDetectHorizontalOverflow({
        rootRef: tabBarRef,
        keysArray,
        isTruncationDisabled: !(truncation && truncation === 'progressive')
    });
    const overflowTabBarClass = classNames([styles.overflowTabBarBase]);
    return (jsx("div", { ref: rootRef, class: overflowTabBarClass, children: jsxs(TabBar, { ref: tabBarRef, selection: selection, onSelect: handleSelect, ...displayProps, layout: layout, edge: edge, onRemove: onRemove, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, testId: testId, children: [visibleItemKeys != null &&
                    visibleItemKeys.length > 0 &&
                    items
                        .filter((item) => visibleItemKeys?.includes(item.itemKey))
                        .map((item) => item.isRemovable ? (jsx(RemovableTabBarItem, { itemKey: item.itemKey, label: item.label, icon: item.icon, badge: item.badge, metadata: item.metadata, severity: item.severity, "aria-controls": item.tabPanelId, labelMaxWidth: maxWidths?.get(item.itemKey) })) : (jsx(TabBarItem, { itemKey: item.itemKey, label: item.label, icon: item.icon, badge: item.badge, metadata: item.metadata, severity: item.severity, "aria-controls": item.tabPanelId, labelMaxWidth: maxWidths?.get(item.itemKey) }))), overflowItemKeys != null && overflowItemKeys.length > 0 && (jsx(OverflowTabBarItem, { isOpen: isDropDownOpen, onClose: handleClose, overflowItemKey: overflowItemKey, overflowItems: items.filter((item) => overflowItemKeys?.includes(item.itemKey)) }))] }) }));
}

export { OverflowTabBar as O };
//# sourceMappingURL=OverflowTabBar-894c7cd9.js.map
