// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';
import { useState } from 'react';
import { isDarkThemed } from '../theming/themeUtils';
import React from 'react';
import { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';
/**
 * @private
 */
export const InputBoxButton = (props) => {
    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId, disabled, ariaExpanded } = props;
    const [isHover, setIsHover] = useState(false);
    const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);
    const theme = useTheme();
    const calloutStyle = {
        root: {
            padding: 0
        },
        calloutMain: {
            padding: '0.5rem'
        }
    };
    // Place callout with no gap between it and the button.
    const calloutProps = {
        gapSpace: 0,
        styles: calloutStyle,
        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
    };
    return React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
        React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                setIsHover(true);
            }, onMouseLeave: () => {
                setIsHover(false);
            }, 
            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
            onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true }));
};
//# sourceMappingURL=InputBoxButton.js.map