// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FocusZone, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';
import React from 'react';
import { useTheme } from '../../theming/FluentThemeProvider';
import { submitWithKeyboard } from '../utils/keyboardNavigation';
/**
 * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
 *
 * @private
 */
export const DrawerMenuItem = (props) => {
    var _a;
    const theme = useTheme();
    const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
    const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
    const secondaryIcon = props.secondaryIconProps ? React.createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps)) : props.subMenuProps ? React.createElement(MenuItemIcon, { iconName: "ChevronRight" }) : undefined;
    return React.createElement(FocusZone, { shouldFocusOnMount: props.shouldFocusOnMount },
        React.createElement(Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id, "aria-label": props.ariaLabel },
            props.iconProps && React.createElement(Stack.Item, { role: "presentation", styles: props.disabled ? {
                    root: {
                        color: theme.palette.neutralTertiaryAlt
                    }
                } : undefined },
                React.createElement(MenuItemIcon, Object.assign({}, props.iconProps))),
            React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
                React.createElement(Text, { styles: props.disabled ? {
                        root: {
                            color: theme.palette.neutralTertiaryAlt
                        }
                    } : undefined }, props.text)),
            props.secondaryText && React.createElement(Stack.Item, { styles: drawerMenuItemTextStyles, className: mergeStyles(secondaryTextStyles) },
                React.createElement(Text, { styles: {
                        root: {
                            color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary
                        }
                    } }, props.secondaryText)),
            props.secondaryComponent && React.createElement(Stack.Item, null, props.secondaryComponent),
            secondaryIcon && React.createElement(Stack.Item, null, secondaryIcon)));
};
const MenuItemIcon = (props) => React.createElement(FontIcon, Object.assign({ className: mergeStyles(iconStyles) }, props));
const menuItemChildrenGap = {
    childrenGap: '0.5rem'
};
const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
        background: hoverBackground
    } }));
const disabledDrawerMenuItemRootStyles = (background) => ({
    pointerEvents: 'none',
    background: background,
    ':hover, :focus': {
        background: background
    }
});
/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */
const drawerMenuItemTextStyles = {
    root: {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
    }
};
const iconStyles = {
    // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)
    ' span': {
        display: 'flex',
        alignItems: 'center',
        height: '100%'
    }
};
const secondaryTextStyles = {
    // limit width for secondaryText in the menu item so it does not overlap with text on left.
    maxWidth: '50%'
};
//# sourceMappingURL=DrawerMenuItem.js.map