/* @oracle/oraclejet-preact: undefined */
import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
import { useState, useCallback } from 'preact/hooks';
import { c as classNames } from './classNames-4e12b00d.js';
import { u as usePress } from './usePress-051f5adb.js';
import { u as useUser } from './useUser-1cd223a9.js';
import { T as Text } from './Text-f8d4ff78.js';
import { F as Flex } from './Flex-ce31b351.js';
import { u as useTabBarContext } from './useTabBarContext-0071d2a7.js';
import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
import { d as dimensionInterpolations } from './dimensions-d4159ace.js';
import { b as boxAlignmentInterpolations } from './boxalignment-a90bc50d.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { TabBarItemRedwoodTheme } from './UNSAFE_TabBarCommon/themes/redwood/TabBarItemTheme.js';
import { u as useConveyorBeltItem } from './useConveyorBeltItem-ce7d69d6.js';
import { u as useDetectTruncation } from './useDetectTruncation-2d400634.js';
import { S as SvgWarningS } from './WarningS-ce1863ad.js';
import { S as SvgErrorS } from './ErrorS-6a705f7c.js';
import { S as SvgInformationS } from './InformationS-820fef0c.js';
import { S as SvgSuccessS } from './SuccessS-a7dda885.js';
import { m as mergeProps } from './mergeProps-88ea8306.js';
import { a as useTooltipControlled } from './useTooltip-89ca3f3e.js';
import { tabBarItemVars } from './UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js';
import { B as Badge } from './Badge-a458c469.js';

const useTabBarItemTooltip = ({ label, isDisabled }) => {
    const [isOpen, setOpen] = useState(false);
    const { tooltipProps, tooltipContent } = 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();
    const isCurrent = currentKey === itemKey;
    const { ref, ...conveyorBeltProps } = 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 = useCallback(() => {
        onSelect?.({ value: itemKey });
    }, [itemKey, onSelect]);
    const { pressProps } = 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 jsx(SvgErrorS, { color: "danger" });
            case 'warning':
                return jsx(SvgWarningS, { color: "warning" });
            case 'info':
                return jsx(SvgInformationS, { color: "info" });
            case 'confirmation':
                return jsx(SvgSuccessS, { color: "success" });
            default:
                return null;
        }
    };
    const { direction } = 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(TabBarItemRedwoodTheme, {
        selection: makeSelectionVisible ? 'isSelected' : 'notSelected',
        current: isCurrent ? 'isCurrent' : 'notCurrent',
        focusRing: makeFocusRingVisible ? 'showFocusRing' : 'noFocusRing',
        edgeBottom: isEdgeBottom ? 'isBottom' : 'notBottom'
    });
    const tabBarItem = classNames([classes]);
    const tabBarItemLabelClasses = classNames([
        tabBarItemLabel,
        labelMaxWidth !== undefined && tabBarItemLabelTruncated
    ]);
    const tabBarItemIconClasses = classNames([
        tabBarItemIcon,
        (isStacked || isIconOnly || !labelRequirement) && tabBarItemIconStacked
    ]);
    const tabBarItemMetadataClasses = classNames([tabBarItemMetadata]);
    const tabBarItemStackedBadgeClasses = classNames([
        tabBarItemStackedBadge,
        direction === 'rtl' && tabBarItemStackedBadgeRtl
    ]);
    const removeClass = classNames([tabBarItemRemoveIcon]);
    const tabBarItemLinkClasses = classNames([tabBarItemLink]);
    const styleInterpolations = mergeInterpolations([
        ...Object.values(flexitemInterpolations),
        ...Object.values(dimensionInterpolations),
        ...Object.values(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 ? tabBarItemVars.lgHeight : 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([
        ...Object.values(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(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 (jsxs(Fragment, { children: [jsxs(Flex, { align: "center", justify: "center", flex: "1 1 auto", gap: "2x", children: [!isIconOnly && !isStacked && icon && labelRequirement && (jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsx(Text, { size: "md", weight: "semiBold", children: label }) }))] }), !isLinkItem && removeIcon && jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const complexItemRenderer = () => {
        return (jsxs(Flex, { flex: "1 1 auto", children: [jsxs(Flex, { minWidth: "10.5x", minHeight: isTall ? tabBarItemVars.lgHeight : '100%', height: isStacked && labelRequirement ? tabBarItemVars.stackedHeight : tabBarItemVars.mdHeight, direction: isStacked && labelRequirement ? 'column' : 'row', gap: "2x", align: "center", justify: "center", alignSelf: "center", flex: "1 1 auto", children: [(isStacked || isIconOnly) && (jsxs("div", { "aria-label": isIconOnly ? label : undefined, class: tabBarItemIconClasses, children: [icon, jsx("span", { class: tabBarItemStackedBadgeClasses, children: badge ? (jsx(Badge, { size: "xs", variant: "neutral", children: badge })) : null })] })), !isIconOnly && !isStacked && icon && labelRequirement && (jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-icon": "startIcon", children: icon })), !isIconOnly && labelRequirement && (jsx("span", { class: tabBarItemLabelClasses, style: maxWidthDimensions, ...detectTruncationProps, children: jsx(Text, { size: "md", weight: "semiBold", children: label }) })), !isStacked && !isIconOnly && badge && labelRequirement && (jsx("span", { "data-oj-tab-badge": badge, children: jsx(Badge, { size: "md", variant: "neutralSubtle", children: badge }) })), metadata && (jsx("span", { class: tabBarItemMetadataClasses, "data-oj-tab-metadata": metadata, children: jsx(Text, { size: "md", weight: "normal", children: '( ' + metadata + ' )' }) })), severityRequirement && (jsx("span", { class: tabBarItemIconClasses, "data-oj-tab-severity": severity, children: IconComponent(severity) }))] }), !isLinkItem && removeIcon && jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const tabBarItemRenderer = () => {
        return (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(pressProps, tooltipEventHandlerProps, conveyorBeltProps), ref: ref, style: isComplexItem ? flexDimensions : tabDimensions, children: [isComplexItem ? complexItemRenderer() : labelIconRenderer(), tooltipContent] }));
    };
    const tabBarLinkItemRenderer = () => {
        return (jsxs("div", { ref: ref, class: tabBarItem, ...mergeProps(pressProps, tooltipEventHandlerProps, conveyorBeltProps), style: isComplexItem ? flexDimensions : tabDimensions, children: [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 (jsx(BaseTabBarItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, icon: icon, badge: badge, metadata: metadata, severity: severity, labelMaxWidth: labelMaxWidth }));
}

export { BaseTabBarItem as B, TabBarItem as T };
//# sourceMappingURL=TabBarItem-b97091e4.js.map
