/* @oracle/oraclejet-preact: undefined */
import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
import { toChildArray } from 'preact';
import { forwardRef } from 'preact/compat';
import { useRef, useCallback, useState } from 'preact/hooks';
import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
import { L as LiveRegion } from './LiveRegion-b56a1aa2.js';
import { T as TabBar } from './TabBar-4d7054f7.js';
import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
import { a as getKey } from './collectionUtils-8a9d80a3.js';
import './LayerHost-e6402730.js';
import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-22ea4c46.js';
import { R as ReorderableContext } from './ReorderableContext-0daeea89.js';
import { styles } from './UNSAFE_ReorderableTabBar/themes/ReorderableTabBarItemStyles.css.js';
import { i as isKeyDefined } from './keys-49c92dbb.js';
import './DragAndDropStyles.styles.css';
import './ReorderableItemStyles.styles.css';

const ITEM_SELECTOR = '[role="tab"]';
/**
 * A private item that will be used by ReorderableTabBar, location TBD (could be moved to PRIVATE_TabBar)
 */
function ReorderableTabBarItem({ children, dragKey, setDragKey, onReorder, layout, rootRef }) {
    const tabBarItemRef = useRef(null);
    const getItem = useCallback(() => tabBarItemRef?.current?.querySelector(ITEM_SELECTOR), []);
    const setTransferData = useCallback((event) => {
        event.dataTransfer?.setData('text/tabbar-item-key', getKey(getItem()) + '');
    }, [getItem]);
    const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } = useReorderableItem({
        isDisabled: onReorder ? false : true,
        dragKey,
        setDragKey,
        onReorder,
        rootRef,
        ref: tabBarItemRef,
        getItem,
        setTransferData,
        itemStyles: styles,
        itemSelector: ITEM_SELECTOR
    });
    //instead of specifying flex: '1 0 auto' in style
    const styleInterpolations = mergeInterpolations([
        ...Object.values(flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    return (jsxs("div", { ...rootProps, draggable: onReorder ? true : false, style: flexDimensions, children: [children, !isDragged && isKeyDefined(dragKey) && (jsxs(Fragment, { children: [jsx("div", { ...overlayZoneBeforeProps }), jsx("div", { ...overlayZoneAfterProps })] }))] }));
}

/**
 * A component that allows reordering of tabs within a TabBar.
 */
const ReorderableTabBar = forwardRef(({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, onSelect, onRemove, onReorder, testId }, ref) => {
    const rootRef = useRef(null);
    const [dragKey, setDragKey] = useState(undefined);
    const displayStackProps = {
        display: display
    };
    const displayNonStackProps = {
        display: display,
        size: size
    };
    const displayProps = display === 'stacked' ? displayStackProps : displayNonStackProps;
    const { reorderProps, reorderContext, reorderInstructionsId, reorderStatus, reorderInstructions } = useReorderable({
        onReorder,
        rootRef,
        itemSelector: ITEM_SELECTOR
    });
    return (jsxs("div", { ref: rootRef, ...reorderProps, children: [jsx(ReorderableContext.Provider, { value: reorderContext, children: jsx(TabBar, { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, layout: layout, edge: edge, selection: selection, onSelect: onSelect, onRemove: onRemove, testId: testId, ...displayProps, "aria-describedby": reorderInstructionsId, children: toChildArray(children).map((child) => {
                        return (jsx(ReorderableTabBarItem, { dragKey: dragKey, setDragKey: setDragKey, onReorder: onReorder, layout: layout, rootRef: rootRef, children: child }));
                    }) }) }), jsx("span", { id: reorderInstructionsId, children: jsx(HiddenAccessible, { children: reorderInstructions }) }), jsx(LiveRegion, { children: reorderStatus })] }));
});

export { ReorderableTabBar as R };
//# sourceMappingURL=ReorderableTabBar-c280e7d4.js.map
