/* @oracle/oraclejet-preact: undefined */
import { jsxs, jsx } from 'preact/jsx-runtime';
import { useRef } from 'preact/hooks';
import { T as Text } from './Text-f8d4ff78.js';
import { a as useNavigationListItem } from './useNavigationListItem-a28f2c34.js';
import { F as Flex } from './Flex-ce31b351.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { c as classNames } from './classNames-4e12b00d.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 { NavigationListItemRedwoodTheme } from './UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme.js';
import { B as Badge } from './Badge-a458c469.js';

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

export { BaseNavigationListItem as B };
//# sourceMappingURL=BaseNavigationListItem-1c75c13f.js.map
