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

var jsxRuntime = require('preact/jsx-runtime');
var useNavigationListItem = require('./useNavigationListItem-b97e76d5.js');
var Close = require('./Close-d99c20a7.js');
var EmbeddedIconButton = require('./EmbeddedIconButton-cc159a01.js');
var hooks = require('preact/hooks');
var useHover = require('./useHover-49b0430d.js');
var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
var Text = require('./Text-056f1ec5.js');
var Flex = require('./Flex-3a257bc3.js');
var Badge = require('./Badge-0e522f12.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var classNames = require('./classNames-c14c6ef3.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 UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme = require('./UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme.js');
var useTooltipControlled = require('./useTooltipControlled-0a95856c.js');
var mergeProps = require('./mergeProps-e3da7237.js');

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

const onClickLink = (event) => {
    event.preventDefault();
};
/*TODO: JET-58535. Add ripple effect when touching navigationListItem. */
function BaseNavigationListItem({ itemKey, label, badge, metadata, severity = 'none', removeIcon, icon, href, 'aria-controls': ariaControls }) {
    const itemRef = hooks.useRef(null);
    //Logic of the component handled here
    const { itemId, itemHandlers, itemClasses, isSelected, labelContainerClasses, labelContainerStyle, isIconOnly, isEdgeEnd, stackedBadgeClasses, iconOnlyClasses, isCurrent, showFocusRing } = useNavigationListItem.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, startIconPadding, endContentPadding, removeIconPaddingWithEndContent, navigationItemMetadata, navigationListItemLink } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme);
    const navigationItemMatadata = classNames.classNames([navigationItemMetadata, endContentPadding]);
    const navigationItemLinkClass = classNames.classNames([navigationListItemLink]);
    const endIconContainerClasses = classNames.classNames([
        iconLabelContainer,
        iconContainer,
        endContentPadding
    ]);
    const startIconContainerClasses = classNames.classNames([
        !isIconOnly && iconLabelContainer,
        iconContainer,
        //For icon only icon to label padding is not required.
        !isIconOnly && startIconPadding,
        isIconOnly && iconOnlyClasses
    ]);
    const { styles: { navigationlistRemoveIcon } } = useComponentTheme.useComponentTheme(UNSAFE_NavigationListCommon_themes_redwood_NavigationListItemTheme.NavigationListItemRedwoodTheme);
    const isComplexItem = metadata || severityRequirement || badge;
    const removeClass = classNames.classNames([
        navigationlistRemoveIcon,
        isComplexItem && removeIconPaddingWithEndContent,
        !isComplexItem && endContentPadding
    ]);
    const isLinkItem = href != null;
    const labelRequirement = label && !(label === ' ' && label === undefined);
    const iconOnlyRequirement = icon && icon != null && isIconOnly;
    const showTooltip = iconOnlyRequirement;
    const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } = useTabBarItemTooltip({
        label,
        isDisabled: !showTooltip,
        // For edge end the tooltip will appear after icon in the order tooltip, icon, selection when navlist is placed at end of page.
        position: !isEdgeEnd ? 'end' : 'start'
    });
    if (showTooltip) {
        if ((isCurrent && showFocusRing) || isSelected) {
            onLogicalFocus(itemRef.current);
        }
        else if (!isCurrent || !showFocusRing) {
            onLogicalBlur();
        }
    }
    const labelRenderer = () => {
        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && (jsxRuntime.jsx(Flex.Flex, { justify: "start", children: jsxRuntime.jsx("span", { class: startIconContainerClasses, children: icon }) })), !isIconOnly && labelRequirement && (jsxRuntime.jsx(Flex.Flex, { align: "center", justify: "start", flex: "1 1 auto", children: jsxRuntime.jsx("span", { class: labelContainerClasses, style: labelContainerStyle, children: jsxRuntime.jsx(Text.Text, { size: "inherit", weight: "inherit", variant: "inherit", children: label }) }) })), removeIcon && !isLinkItem && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }));
    };
    const complexItemRenderer = () => {
        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconOnlyRequirement && (jsxRuntime.jsxs("div", { class: startIconContainerClasses, children: [icon, jsxRuntime.jsx("span", { class: stackedBadgeClasses, children: badge ? (jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: "neutral", children: badge })) : null })] })), !isIconOnly && icon && (jsxRuntime.jsx(Flex.Flex, { justify: "start", children: jsxRuntime.jsx("span", { class: startIconContainerClasses, children: icon }) })), (!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&
                    labelRequirement && (jsxRuntime.jsx(Flex.Flex, { align: "center", justify: "start", flex: "1 1 auto", children: 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, { align: "center", justify: "end", children: [' ', (!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&
                            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 && !isLinkItem && jsxRuntime.jsx("span", { class: removeClass, children: removeIcon })] }))] }));
    };
    const navlistItemRenderer = () => {
        return (jsxRuntime.jsxs("div", { role: "tab", ...mergeProps.mergeProps(tooltipEventHandlerProps, itemHandlers), "data-oj-key": itemKey, id: itemId, class: itemClasses, "aria-selected": isSelected, ref: itemRef, "aria-controls": ariaControls, children: [isComplexItem ? complexItemRenderer() : labelRenderer(), isIconOnly && tooltipContent] }));
    };
    const navlistLinkItemRenderer = () => {
        return (jsxRuntime.jsx("div", { ...itemHandlers, class: itemClasses, children: jsxRuntime.jsx("a", { tabindex: -1, role: "tab", "data-oj-key": itemKey, id: itemId, class: navigationItemLinkClass, "aria-selected": isSelected, "aria-controls": ariaControls, href: href, onClick: onClickLink, children: isComplexItem ? complexItemRenderer() : labelRenderer() }) }));
    };
    return isLinkItem ? navlistLinkItemRenderer() : navlistItemRenderer();
}

function RemovableNavigationListItem({ itemKey, label, badge, metadata, severity }) {
    const { selection, currentKey, onRemove } = useNavigationListItem.useNavigationListContext();
    const isSelected = selection === itemKey;
    const isCurrent = currentKey === itemKey;
    const handleRemove = hooks.useCallback(() => {
        onRemove?.({ value: itemKey });
    }, [onRemove, itemKey]);
    const { hoverProps, isHover } = useHover.useHover({});
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    //instead of specifying flex: '1 0 auto' in cssProps var
    return (jsxRuntime.jsx("div", { ...hoverProps, children: jsxRuntime.jsx(BaseNavigationListItem, { itemKey: itemKey, label: label, badge: badge, metadata: metadata, severity: severity, removeIcon: jsxRuntime.jsx("span", { "data-oj-navigationlist-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, {}) }) }) }) }));
}

/**
 * NavigationListLinkItem is used to render links in a NavigationList. It allows to view the browser's built in link context menu to open the link in new browser tab.
 */
function NavigationListLinkItem({ itemKey, badge, metadata, severity, href, label, 'aria-controls': ariaControls }) {
    return (jsxRuntime.jsx(BaseNavigationListItem, { "aria-controls": ariaControls, itemKey: itemKey, label: label, badge: badge, metadata: metadata, severity: severity, href: href }));
}

exports.BaseNavigationListItem = BaseNavigationListItem;
exports.NavigationListLinkItem = NavigationListLinkItem;
exports.RemovableNavigationListItem = RemovableNavigationListItem;
exports.useTabBarItemTooltip = useTabBarItemTooltip;
//# sourceMappingURL=NavigationListLinkItem-317a5200.js.map
