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

var jsxRuntime = require('preact/jsx-runtime');
var hooks = require('preact/hooks');
var useHover = require('./useHover-49b0430d.js');
var EmbeddedIconButton = require('./EmbeddedIconButton-cc159a01.js');
var Close = require('./Close-d99c20a7.js');
var Flex = require('./Flex-3a257bc3.js');
var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
var flexitem = require('./flexitem-fee13e26.js');
var TabBarLayout = require('./TabBarLayout-ca8af14b.js');
var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
var preact = require('preact');
var clientHints = require('./clientHints-c40c5250.js');
var classNames = require('./classNames-c14c6ef3.js');
var NavigationList = require('./NavigationList-d0d74565.js');
var NavigationListItem = require('./NavigationListItem-b0b03089.js');

var Icon = require('./Icon-56789beb.js');
var Dropdown = require('./Dropdown-1ba432a8.js');
var Sheet = require('./Sheet-1d6e8cf8.js');
var usePress = require('./usePress-886180e4.js');
var useUser = require('./useUser-1295b5cb.js');
var Text = require('./Text-056f1ec5.js');
var dimensions = require('./dimensions-6101ca1f.js');
var boxalignment = require('./boxalignment-e287d370.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var UNSAFE_TabBarCommon_themes_redwood_TabBarItemTheme = require('./UNSAFE_TabBarCommon/themes/redwood/TabBarItemTheme.js');
var Badge = require('./Badge-0e522f12.js');
var useConveyorBeltItem = require('./useConveyorBeltItem-6c1771e5.js');
var useDetectTruncation = require('./useDetectTruncation-a5b9dd16.js');
var WarningS = require('./WarningS-cdb0a7ad.js');
var ErrorS = require('./ErrorS-b027f7ad.js');
var InformationS = require('./InformationS-b0bb102b.js');
var SuccessS = require('./SuccessS-b6757c64.js');
var mergeProps = require('./mergeProps-e3da7237.js');
var NavigationListLinkItem = require('./NavigationListLinkItem-317a5200.js');
var UNSAFE_TabBarCommon_themes_TabBarItemContract_css = require('./UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
var UNSAFE_TabBarCommon_themes_OverflowTabBarItemStyles_css = require('./UNSAFE_TabBarCommon/themes/OverflowTabBarItemStyles.css.js');

const onClickLink = (event) => {
    event.preventDefault();
};
function BaseTabBarItem({ itemKey, label, icon, badge, metadata, severity = 'none', removeIcon, showFocusRingOverride, selectionOverride, displayOverride, labelMaxWidth, href, 'aria-controls': ariaControls, 'aria-haspopup': ariaHasPopup }) {
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const { onSelect, selection, currentKey, showFocusRing, hideTooltip, layout, display, size, isEdgeBottom, tabItemPrefix } = TabBarLayout.useTabBarContext();
    const isCurrent = currentKey === itemKey;
    const { ref, ...conveyorBeltProps } = useConveyorBeltItem.useConveyorBeltItem({ isCurrent });
    //Selection
    //Dependency on currentKey because upon removal selectionChange does not change hence no re render
    //and it is still holding the deleted key as selection
    const handlePress = hooks.useCallback(() => {
        onSelect?.({ value: itemKey });
    }, [itemKey, onSelect]);
    const { pressProps } = usePress.usePress(handlePress);
    const isSelected = selection === itemKey;
    const isStacked = display === 'stacked' ? true : false;
    const isIconOnly = display === 'icons' || (displayOverride && displayOverride === 'icons') ? true : false;
    const isTall = size === 'lg' ? true : false;
    const labelRequirement = label && !(label === ' ' && label === undefined);
    const severityRequirement = !(severity === 'none' || severity === undefined);
    const IconComponent = (severityValue) => {
        switch (severityValue) {
            case 'error':
                // As per spec acc label is required only for error severity icon.
                return jsxRuntime.jsx(ErrorS.SvgErrorS, { color: "danger", accessibleLabel: translations.tabBar_tabContainsErrors() });
            case 'warning':
                return jsxRuntime.jsx(WarningS.SvgWarningS, { color: "warning" });
            case 'info':
                return jsxRuntime.jsx(InformationS.SvgInformationS, { color: "info" });
            case 'confirmation':
                return jsxRuntime.jsx(SuccessS.SvgSuccessS, { color: "success" });
            default:
                return null;
        }
    };
    const { direction } = useUser.useUser();
    const makeFocusRingVisible = showFocusRingOverride !== undefined ? showFocusRingOverride : showFocusRing;
    const makeSelectionVisible = selectionOverride !== undefined ? selectionOverride : isSelected;
    const { classes, styles: { tabBarItemIcon, tabBarItemIconStacked, tabBarItemMetadata, tabBarItemStackedBadge, tabBarItemStackedBadgeRtl, tabBarItemRemoveIcon, tabBarItemLabel, tabBarItemLabelTruncated, tabBarItemLink } } = useComponentTheme.useComponentTheme(UNSAFE_TabBarCommon_themes_redwood_TabBarItemTheme.TabBarItemRedwoodTheme, {
        selection: makeSelectionVisible ? 'isSelected' : 'notSelected',
        current: isCurrent ? 'isCurrent' : 'notCurrent',
        focusRing: makeFocusRingVisible ? 'showFocusRing' : 'noFocusRing',
        edgeBottom: isEdgeBottom ? 'isBottom' : 'notBottom'
    });
    const tabBarItem = classNames.classNames([classes]);
    const tabBarItemLabelClasses = classNames.classNames([
        tabBarItemLabel,
        labelMaxWidth !== undefined && tabBarItemLabelTruncated
    ]);
    const tabBarItemIconClasses = classNames.classNames([
        tabBarItemIcon,
        (isStacked || isIconOnly || !labelRequirement) && tabBarItemIconStacked
    ]);
    const tabBarItemMetadataClasses = classNames.classNames([tabBarItemMetadata]);
    const tabBarItemStackedBadgeClasses = classNames.classNames([
        tabBarItemStackedBadge,
        direction === 'rtl' && tabBarItemStackedBadgeRtl
    ]);
    const removeClass = classNames.classNames([tabBarItemRemoveIcon]);
    const tabBarItemLinkClasses = classNames.classNames([tabBarItemLink]);
    const styleInterpolations = mergeInterpolations.mergeInterpolations([
        ...Object.values(flexitem.flexitemInterpolations),
        ...Object.values(dimensions.dimensionInterpolations),
        ...Object.values(boxalignment.boxAlignmentInterpolations)
    ]);
    //This is for simple item where height and width need to be specified on the main div.
    const tabDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto',
        minWidth: '10.5x',
        height: isTall ? UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.lgHeight : UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.mdHeight,
        //This is needed for gap between icon/ label and remove icon in labelIconRenderer
        gap: '2x'
    });
    //This is for complex item, where only flex dimensions needs to be applied as height and width comes from child Flex component.
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const maxWithInterpolation = mergeInterpolations.mergeInterpolations([
        ...Object.values(dimensions.dimensionInterpolations)
    ]);
    //The threshold for truncation is labelMinWidth: 96px as per spec.
    const labelMinWidth = '96px';
    const maxWidthDimensions = maxWithInterpolation({
        maxWidth: labelMaxWidth !== undefined ? `calc(max(${labelMinWidth},${labelMaxWidth}))` : '100%'
    });
    const { detectTruncationProps, isTextTruncated } = useDetectTruncation.useDetectTruncation(labelMaxWidth === undefined);
    const showTooltip = isIconOnly || isTextTruncated;
    const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } = NavigationListLinkItem.useTabBarItemTooltip({ label, isDisabled: !showTooltip });
    if (showTooltip) {
        if (isCurrent && showFocusRing && !hideTooltip) {
            onLogicalFocus(ref.current);
        }
        else if (!isCurrent || (isCurrent && !showFocusRing) || hideTooltip) {
            onLogicalBlur();
        }
    }
    const isComplexItem = badge || metadata || severity !== 'none' || isStacked || isIconOnly;
    const isLinkItem = href != null;
    const labelIconRenderer = () => {
        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Flex.Flex, { align: "center", justify: "center", flex: "1 1 auto", gap: "2x", children: [!isIconOnly && !isStacked && icon && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsxRuntime.jsx(Text.Text, { size: "md", weight: "semiBold", children: label }) }))] }), !isLinkItem && removeIcon && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const complexItemRenderer = () => {
        return (jsxRuntime.jsxs(Flex.Flex, { flex: "1 1 auto", children: [jsxRuntime.jsxs(Flex.Flex, { minWidth: "10.5x", minHeight: isTall ? UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.lgHeight : '100%', height: isStacked && labelRequirement ? UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.stackedHeight : UNSAFE_TabBarCommon_themes_TabBarItemContract_css.tabBarItemVars.mdHeight, direction: isStacked && labelRequirement ? 'column' : 'row', gap: "2x", align: "center", justify: "center", alignSelf: "center", flex: "1 1 auto", children: [(isStacked || isIconOnly) && (jsxRuntime.jsxs("div", { class: tabBarItemIconClasses, children: [
                                // JET-79198 - The label is made hidden so that in can be read out by screen readers and we will not need aria-label at role="tab" level to include all the content in it's children
                                isIconOnly && jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: "hiddenLabel", children: label }), icon, jsxRuntime.jsx("span", { class: tabBarItemStackedBadgeClasses, children: badge ? (jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: "neutral", children: badge })) : null })] })), !isIconOnly && !isStacked && icon && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsxRuntime.jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsxRuntime.jsx(Text.Text, { size: "md", weight: "semiBold", children: label }) })), !isStacked && !isIconOnly && badge && labelRequirement && (jsxRuntime.jsx("span", { "data-oj-tab-badge": badge, children: jsxRuntime.jsx(Badge.Badge, { size: "md", variant: "neutralSubtle", children: badge }) })), metadata && (jsxRuntime.jsx("span", { class: tabBarItemMetadataClasses, "data-oj-tab-metadata": metadata, children: jsxRuntime.jsx(Text.Text, { size: "md", weight: "normal", children: '( ' + metadata + ' )' }) })), severityRequirement && (jsxRuntime.jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-severity": severity, children: IconComponent(severity) }))] }), !isLinkItem && removeIcon && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const tabBarItemRenderer = () => {
        return (jsxRuntime.jsxs("div", { "data-oj-key": itemKey, "data-oj-removable": removeIcon ? 'true' : undefined, id: tabItemPrefix + itemKey, class: tabBarItem, role: "tab", "aria-controls": ariaControls, "aria-selected": isSelected, "aria-haspopup": ariaHasPopup, ...mergeProps.mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), ref: ref, style: isComplexItem ? flexDimensions : tabDimensions, children: [isComplexItem ? complexItemRenderer() : labelIconRenderer(), tooltipContent] }));
    };
    const tabBarLinkItemRenderer = () => {
        return (jsxRuntime.jsxs("span", { ref: ref, class: tabBarItem, ...mergeProps.mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), style: isComplexItem ? flexDimensions : tabDimensions, children: [jsxRuntime.jsx("a", { onClick: onClickLink, class: tabBarItemLinkClasses, href: href, "data-oj-key": itemKey, "data-oj-removable": removeIcon ? 'true' : undefined, id: tabItemPrefix + itemKey, role: "tab", tabindex: -1, "aria-controls": ariaControls, "aria-selected": isSelected, "aria-haspopup": ariaHasPopup, children: isComplexItem ? complexItemRenderer() : labelIconRenderer() }), tooltipContent] }));
    };
    return isLinkItem ? tabBarLinkItemRenderer() : tabBarItemRenderer();
}

/**
 * TabBarItem content can be created by using labels or icons or both.
 */
function TabBarItem({ itemKey, label, icon, badge, metadata, severity, labelMaxWidth, 'aria-controls': ariaControls }) {
    return (jsxRuntime.jsx(BaseTabBarItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, icon: icon, badge: badge, metadata: metadata, severity: severity, labelMaxWidth: labelMaxWidth }));
}

function RemovableTabBarItem({ itemKey, label, icon, badge, metadata, severity, labelMaxWidth, 'aria-controls': ariaControls }) {
    const { selection, currentKey, layout, onRemove } = TabBarLayout.useTabBarContext();
    const isSelected = selection === itemKey;
    const isCurrent = currentKey === itemKey;
    const handleRemove = hooks.useCallback(() => {
        onRemove?.({ value: itemKey });
    }, [onRemove, itemKey]);
    const { hoverProps, isHover } = useHover.useHover({});
    //instead of specifying flex: '1 0 auto' in cssProps var
    const styleInterpolations = mergeInterpolations.mergeInterpolations([
        ...Object.values(flexitem.flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    //TODO: In addition to aria-label a genric instruction is required for keyboard deletion
    //common to al tabs,after feedback from Curt's investigations.
    return (jsxRuntime.jsx("div", { ...hoverProps, style: flexDimensions, children: jsxRuntime.jsx(Flex.Flex, { children: jsxRuntime.jsx(BaseTabBarItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, icon: icon, badge: badge, metadata: metadata, severity: severity, labelMaxWidth: labelMaxWidth, removeIcon: jsxRuntime.jsx("span", { "data-oj-tabbar-item-remove-icon": "true", children: jsxRuntime.jsx(EmbeddedIconButton.EmbeddedIconButton, { "aria-label": translations.tabBarNavigationList_removeCueText(), size: "xs", onAction: handleRemove, children: (isHover || isSelected || isCurrent) && jsxRuntime.jsx(Close.SvgClose, {}) }) }) }) }) }));
}

const SvgOverflowH = (props) => (jsxRuntime.jsx(Icon.Icon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.jsx("g", { fill: "none", children: jsxRuntime.jsx("path", { d: "M6 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0z", fill: "currentcolor" }) }) }));

/**
 * An OverflowTabBarItem renders TabBarItems in a device appropriate popup. OverflowTabBarItem is used internally in an OverflowTabBar.
 */
function OverflowTabBarItem({ overflowItemKey, icon, badge, overflowItems, isOpen, onClose }) {
    const { selection, showFocusRing, isEdgeBottom, onSelect, onRemove, layout } = TabBarLayout.useTabBarContext();
    const isPointerSelection = hooks.useRef(false);
    // Reset pointer selection flag when the popup closes so keyboard navigation
    // restores focus-visible on the overflow trigger.
    hooks.useEffect(() => {
        if (!isOpen) {
            isPointerSelection.current = false;
        }
    }, [isOpen]);
    const overflowTabBarItemRef = hooks.useRef(null);
    const navigationListRef = preact.createRef();
    const handleSelectionChange = hooks.useCallback((detail) => {
        if (detail.reason === 'pointer') {
            isPointerSelection.current = true;
        }
        onSelect?.({ value: detail.value });
        onClose?.({ reason: 'itemAction' });
    }, [onSelect, onClose]);
    const handleDropdownClose = hooks.useCallback((e) => {
        onClose?.({ reason: e.reason });
    }, [onClose]);
    const handleSheetClose = hooks.useCallback(() => {
        onClose?.({ reason: 'dismissed' });
    }, [onClose]);
    //When NavigationList steals focus the app resets it. Not always would it be reset to
    //parent of OverflowTabBarItem. Though currentKey would be correct, but focusRing would would not be visible
    //Hence we check for isPointerSelection.current
    const focusRingRequirement = showFocusRing && !isPointerSelection.current && !getIsMobile();
    const overflowContainsKey = (searchKey) => {
        return overflowItems?.find((item) => item.itemKey === searchKey) != null;
    };
    const currentPanelId = overflowItems?.find((item) => item.itemKey === selection)?.tabPanelId;
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const isSelected = selection !== undefined && overflowContainsKey(selection);
    //instead of specifying flex: '1 0 auto' in cssProps var
    const styleInterpolations = mergeInterpolations.mergeInterpolations([
        ...Object.values(flexitem.flexitemInterpolations)
    ]);
    const flexDimensions = styleInterpolations({
        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
    });
    const navContainerClasses = classNames.classNames([UNSAFE_TabBarCommon_themes_OverflowTabBarItemStyles_css.styles.navContainerBase]);
    const navContainerRef = hooks.useRef(null);
    const handleKeyDown = hooks.useCallback((event) => {
        if (event.key === 'ArrowDown') {
            event.preventDefault();
            navigationListRef.current?.focus();
        }
    }, [navigationListRef]);
    const getNavigationList = hooks.useCallback(() => {
        return (jsxRuntime.jsx("div", { onKeyDown: handleKeyDown, tabIndex: 0, ref: navContainerRef, class: navContainerClasses, children: jsxRuntime.jsx(NavigationList.NavigationList, { ref: navigationListRef, selection: selection, onSelectionChange: handleSelectionChange, onRemove: onRemove, children: overflowItems?.map((item) => item.href != null ? (jsxRuntime.jsx(NavigationListLinkItem.NavigationListLinkItem, { href: item.href, itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : item.isRemovable ? (jsxRuntime.jsx(NavigationListLinkItem.RemovableNavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : (jsxRuntime.jsx(NavigationListItem.NavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity }))) }) }));
    }, [
        handleKeyDown,
        navContainerClasses,
        navigationListRef,
        selection,
        handleSelectionChange,
        onRemove,
        overflowItems
    ]);
    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overflowItems && overflowItems.length > 0 && (jsxRuntime.jsx("div", { ref: overflowTabBarItemRef, style: flexDimensions, children: jsxRuntime.jsx(BaseTabBarItem, { "aria-controls": currentPanelId, itemKey: overflowItemKey, label: translations.overflowItemLabel(), icon: icon ? icon : jsxRuntime.jsx(SvgOverflowH, {}), badge: badge, showFocusRingOverride: focusRingRequirement, selectionOverride: isSelected, displayOverride: 'icons', "aria-haspopup": true }) })), getIsMobile() ? (jsxRuntime.jsx(Sheet.Sheet, { isOpen: isOpen, onClose: handleSheetClose, initialFocus: "firstFocusable", children: getNavigationList() })) : (jsxRuntime.jsx(Dropdown.Dropdown, { initialFocus: "firstFocusable", isOpen: isOpen, onClose: handleDropdownClose, placement: isEdgeBottom ? 'top-end' : 'bottom-end', anchorRef: overflowTabBarItemRef, children: getNavigationList() }))] }));
}
const getIsMobile = () => {
    const { deviceRenderMode } = clientHints.getClientHints();
    return deviceRenderMode === 'phone';
};

exports.BaseTabBarItem = BaseTabBarItem;
exports.OverflowTabBarItem = OverflowTabBarItem;
exports.RemovableTabBarItem = RemovableTabBarItem;
exports.TabBarItem = TabBarItem;
//# sourceMappingURL=OverflowTabBarItem-19ad4971.js.map
