/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var preact = require('preact');
var compat = require('preact/compat');
var hooks = require('preact/hooks');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
var LiveRegion = require('./LiveRegion-e3c8541c.js');
var TabBar = require('./TabBar-ae497b21.js');
var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
var flexitem = require('./flexitem-fee13e26.js');
var collectionUtils = require('./collectionUtils-7ae57f89.js');
require('./LayerHost-8ec73638.js');
var useReorderableItem = require('./useReorderableItem-72595ee3.js');
var ReorderableContext = require('./ReorderableContext-16396e17.js');
var UNSAFE_ReorderableTabBar_themes_ReorderableTabBarItemStyles_css = require('./UNSAFE_ReorderableTabBar/themes/ReorderableTabBarItemStyles.css.js');
var keys = require('./keys-25710458.js');



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 = hooks.useRef(null);
    const getItem = hooks.useCallback(() => tabBarItemRef?.current?.querySelector(ITEM_SELECTOR), []);
    const setTransferData = hooks.useCallback((event) => {
        event.dataTransfer?.setData('text/tabbar-item-key', collectionUtils.getKey(getItem()) + '');
    }, [getItem]);
    const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } = useReorderableItem.useReorderableItem({
        isDisabled: onReorder ? false : true,
        dragKey,
        setDragKey,
        onReorder,
        rootRef,
        ref: tabBarItemRef,
        getItem,
        setTransferData,
        itemStyles: UNSAFE_ReorderableTabBar_themes_ReorderableTabBarItemStyles_css.styles,
        itemSelector: ITEM_SELECTOR
    });
    //instead of specifying flex: '1 0 auto' in style
    const styleInterpolations = mergeInterpolations.mergeInterpolations([
        ...Object.values(flexitem.flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    return (jsxRuntime.jsxs("div", { ...rootProps, draggable: onReorder ? true : false, style: flexDimensions, children: [children, !isDragged && keys.isKeyDefined(dragKey) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ...overlayZoneBeforeProps }), jsxRuntime.jsx("div", { ...overlayZoneAfterProps })] }))] }));
}

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

exports.ReorderableTabBar = ReorderableTabBar;
//# sourceMappingURL=ReorderableTabBar-0a94441d.js.map
