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

var jsxRuntime = require('preact/jsx-runtime');
var hooks = require('preact/hooks');
var Text = require('./Text-15923d58.js');
var usePress = require('./usePress-886180e4.js');
var mergeProps = require('./mergeProps-e3da7237.js');
var classNames = require('./classNames-c14c6ef3.js');
var useInteractionStyle = require('./useInteractionStyle-379ee8fa.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var preact = require('preact');
var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
var flexitem = require('./flexitem-fee13e26.js');
var UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme = require('./UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme.js');
var Flex = require('./Flex-da9f223a.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 Badge = require('./Badge-0e522f12.js');

/**
 * @license
 * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
 * Licensed under The Universal Permissive License (UPL), Version 1.0
 * as shown at https://oss.oracle.com/licenses/upl/
 * @ignore
 */
/**
 * Context used to pass navlist information without having to pass it to navlist children props.
 * We want to communicate information down to any interested navlist item children.
 */
const NavigationListContext = preact.createContext(null);

/**
 * @license
 * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
 * Licensed under The Universal Permissive License (UPL), Version 1.0
 * as shown at https://oss.oracle.com/licenses/upl/
 * @ignore
 */
/**
 * Utility hook for consuming the NavigationListContext
 *
 * @returns The value of NavigationListContext provider
 */
function useNavigationListContext() {
    return hooks.useContext(NavigationListContext);
}

const flexItemStyleInterpolations = mergeInterpolations.mergeInterpolations([
    ...Object.values(flexitem.flexitemInterpolations)
]);
const { class: labelContainerFlexItemClasses, ...labelContainerFlexItemStyle } = flexItemStyleInterpolations({
    alignSelf: 'center'
});
function useNavigationListItem({ itemKey }) {
    const { onSelectionChange, selection, currentKey, showFocusRing, navigationListItemPrefix } = useNavigationListContext();
    //Selection and focus state
    const isCurrent = currentKey === itemKey;
    const isSelected = selection === itemKey;
    //Styling
    const { interactionProps, applyPseudoHoverStyle, applyHoverStyle, applyActiveStyle } = useInteractionStyle.useInteractionStyle();
    const { classes: listItemClasses, styles: { labelContainerClasses } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme, {
        focusRing: showFocusRing ? 'isFocusRing' : 'notFocusRing',
        current: isCurrent ? 'isCurrent' : 'notCurrtent',
        selected: isSelected ? 'isSelected' : 'notSelected',
        hybridHover: applyHoverStyle ? 'isHybridHover' : 'notHybridHover',
        pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',
        active: applyActiveStyle ? 'isActive' : 'notActive'
    });
    //Item handlers
    const handlePress = hooks.useCallback(() => {
        onSelectionChange?.({ value: itemKey, reason: 'pointer' });
    }, [itemKey, onSelectionChange]);
    //Legacy navlist makes selection on keyDown, but since preact tabbar made selection after keyUp, will do the same
    //for preact navlist
    const { pressProps } = usePress.usePress(handlePress);
    return {
        itemId: navigationListItemPrefix + itemKey,
        itemHandlers: mergeProps.mergeProps(interactionProps, pressProps /*,onFocusProps*/),
        itemClasses: classNames.classNames([listItemClasses]),
        isSelected,
        labelContainerClasses: classNames.classNames([labelContainerClasses, labelContainerFlexItemClasses]),
        labelContainerStyle: labelContainerFlexItemStyle
    };
}

/*TODO: JET-58535. Add ripple effect when touching navigationListItem. */
function BaseNavigationListItem({ itemKey, label, badge, metadata, severity = 'none', removeIcon }) {
    const itemRef = hooks.useRef(null);
    //Logic of the component handled here
    const { itemId, itemHandlers, itemClasses, isSelected, labelContainerClasses, labelContainerStyle } = useNavigationListItem({
        itemKey
    });
    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 { styles: { iconLabelContainer, iconContainer, navigationItemMetadata } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme);
    const navigationItemMatadata = classNames.classNames([navigationItemMetadata]);
    const endIconContainerClasses = classNames.classNames([iconLabelContainer, iconContainer]);
    const { styles: { navigationlistRemoveIcon } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme);
    const removeClass = classNames.classNames([navigationlistRemoveIcon]);
    return (jsxRuntime.jsxs("li", { role: "tab", ...itemHandlers, "data-oj-key": itemKey, id: itemId, class: itemClasses, "aria-selected": isSelected, ref: itemRef, children: [label && (jsxRuntime.jsx("span", { class: labelContainerClasses, style: labelContainerStyle, children: jsxRuntime.jsx(Text.Text, { size: "inherit", weight: "inherit", variant: "inherit", children: label }) })), (metadata || severityRequirement || badge || removeIcon) && (jsxRuntime.jsxs(Flex.Flex, { gap: "2x", align: "center", justify: "end", flex: "1 1 auto", children: [' ', badge && (jsxRuntime.jsx("span", { class: endIconContainerClasses, children: jsxRuntime.jsx(Badge.Badge, { size: "md", variant: "neutralSubtle", children: badge }) })), metadata && (jsxRuntime.jsx("span", { class: navigationItemMatadata, children: jsxRuntime.jsx(Text.Text, { children: '( ' + metadata + ' )' }) })), severityRequirement && (jsxRuntime.jsx("span", { class: endIconContainerClasses, children: IconComponent(severity) })), removeIcon && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }))] }));
}

exports.BaseNavigationListItem = BaseNavigationListItem;
exports.NavigationListContext = NavigationListContext;
exports.useNavigationListContext = useNavigationListContext;
//# sourceMappingURL=BaseNavigationListItem-709591de.js.map
