import React, { memo, useContext } from 'react';
import { SidebarNextContext } from '../SidebarNext/SidebarNextContext';
import { useFocusRing } from '../providers/useFocusRing/useFocusRing';
import { dataHooks, skins } from './constants';
import { classes, st } from './SidebarItemNext.st.css.js';
import Transition from '../Transition';
import Text from '../Text';
import Tooltip from '../Tooltip';
const SidebarItemButtonNext = memo(props => {
    const context = useContext(SidebarNextContext);
    const { skin, level, selectedPath, inert, parent, closeQuickNav, legacy, minimized, isFirstLevelWithPrefix, } = context;
    const { as = 'button', role = as === 'a' ? 'link' : 'button', // FIXME: check original code, this is weird
    // @ts-ignore
    href, // FIXME: from intersection
    dataHook, children, disabled, onClick, className, itemKey, suffix, prefix, isInQuickNavigation, minimizedTooltipContent, ...asComponentProps } = props;
    const { isFocusVisible, focusProps } = useFocusRing();
    const Component = as;
    const selected = !!selectedPath?.length && selectedPath[selectedPath.length - 1] === itemKey;
    const htmlHref = disabled ? undefined : href;
    const tabIndex = inert ? -1 : 0;
    const textSize = level === 1 ? 'small' : 'tiny';
    const inContextMenu = parent === 'inContextMenu';
    const buttonClassName = st(classes.root, {
        selected,
        disabled,
        skin,
        inContextMenu,
        hasPrefix: !!prefix,
        isFirstLevelWithPrefix,
        level,
        legacy,
        isFocusVisible,
        minimized,
    }, className);
    const handleClick = (event) => {
        if (!disabled) {
            closeQuickNav?.();
            // @ts-ignore
            onClick?.(event, itemKey); // FIXME: itemKey was not typed in props
        }
    };
    // Support accessibility for keyboard navigation
    const handleKeyDown = (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
            handleClick?.(event);
        }
    };
    const tooltipVisible = minimized && !!minimizedTooltipContent;
    return (React.createElement("div", { className: st(classes.tooltipWrapper), ...focusProps, tabIndex: tabIndex, onKeyDown: handleKeyDown },
        React.createElement(Tooltip, { placement: "right", content: minimizedTooltipContent, disabled: !tooltipVisible, className: classes.tooltip },
            React.createElement(Component, { tabIndex: -1, className: buttonClassName, "data-hook": dataHook, type: "button", role: role, href: htmlHref, disabled: href ? false : disabled, onClick: handleClick, "aria-current": selected ? 'page' : undefined, "data-selected": selected, "data-disabled": disabled, "data-text-size": textSize, "data-skin": skin, ...asComponentProps },
                level === 3 && !inContextMenu && React.createElement("hr", { className: classes.divider }),
                prefix && (React.createElement("span", { className: classes.prefix, "data-hook": dataHooks.prefix, "aria-hidden": true }, prefix)),
                React.createElement(Transition, { className: classes.textWrapper, show: !minimized, exitAnimation: {
                        fadeOut: {
                            duration: 'fast01',
                            easing: 'exitEasing',
                        },
                    } },
                    React.createElement(Text, { dataHook: dataHooks.title, className: classes.text, size: textSize, weight: "normal", secondary: skin === skins.light, light: skin === skins.dark, skin: disabled ? 'disabled' : 'standard', showTooltip: false }, children)),
                !disabled && suffix && !minimized && (React.createElement("div", { className: classes.suffixContainer, "aria-hidden": true }, Array.isArray(suffix)
                    ? suffix.slice(0, 2).map(renderSuffix)
                    : renderSuffix(suffix, 0)))))));
});
const renderSuffix = (suffix, index) => (React.createElement("span", { key: `${dataHooks.suffix}-${index}`, "data-hook": dataHooks.suffix, className: classes.suffix }, suffix));
SidebarItemButtonNext.displayName = 'SidebarItemButtonNext';
export default SidebarItemButtonNext;
//# sourceMappingURL=SidebarItemButtonNext.js.map