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

var jsxRuntime = require('preact/jsx-runtime');
var hooks = require('preact/hooks');
var classNames = require('./classNames-c14c6ef3.js');
var usePress = require('./usePress-886180e4.js');
var useUser = require('./useUser-c85f9587.js');
var Text = require('./Text-15923d58.js');
var Flex = require('./Flex-da9f223a.js');
var useTabBarContext = require('./useTabBarContext-2a6a796c.js');
var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
var flexitem = require('./flexitem-fee13e26.js');
var dimensions = require('./dimensions-b4be9793.js');
var boxalignment = require('./boxalignment-28ee3565.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var UNSAFE_TabBarCommon_themes_redwood_TabBarItemTheme = require('./UNSAFE_TabBarCommon/themes/redwood/TabBarItemTheme.js');
var useConveyorBeltItem = require('./useConveyorBeltItem-eb851d33.js');
var useDetectTruncation = require('./useDetectTruncation-e6304b0a.js');
var WarningS = require('./WarningS-2f402fac.js');
var ErrorS = require('./ErrorS-e9799ab5.js');
var InformationS = require('./InformationS-0605a80d.js');
var SuccessS = require('./SuccessS-035e292e.js');
var mergeProps = require('./mergeProps-e3da7237.js');
var useTooltip = require('./useTooltip-cf4a15f3.js');
var UNSAFE_TabBarCommon_themes_TabBarItemContract_css = require('./UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js');
var Badge = require('./Badge-0e522f12.js');

const useTabBarItemTooltip = ({ label, isDisabled }) => {
    const [isOpen, setOpen] = hooks.useState(false);
    const { tooltipProps, tooltipContent } = useTooltip.useTooltipControlled({
        isOpen: isOpen,
        isDisabled,
        focusStrategy: 'logical',
        text: label,
        onToggle: ({ value }) => {
            setOpen(value);
        }
    });
    const { onLogicalFocus, onLogicalBlur, ...tooltipEventHandlerProps } = tooltipProps;
    return { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur };
};

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 { onSelect, selection, currentKey, showFocusRing, hideTooltip, layout, display, size, isEdgeBottom, tabItemPrefix } = useTabBarContext.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':
                return jsxRuntime.jsx(ErrorS.SvgErrorS, { color: "danger" });
            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 } = 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", { "aria-label": isIconOnly ? label : undefined, class: tabBarItemIconClasses, children: [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("div", { 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 }));
}

exports.BaseTabBarItem = BaseTabBarItem;
exports.TabBarItem = TabBarItem;
//# sourceMappingURL=TabBarItem-868455a3.js.map
