"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UITooltip = exports.UITooltipDelay = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
Object.defineProperty(exports, "UITooltipDelay", { enumerable: true, get: function () { return react_2.TooltipDelay; } });
const UICallout_1 = require("../UICallout");
/**
 * UITooltip component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
 * it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
 *
 * @exports
 * @class UITooltip
 * @extends {React.Component<UITooltipProps, {}>}
 */
class UITooltip extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UITooltipProps} props
     */
    constructor(props) {
        super(props);
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const maxWidth = this.props.maxWidth ?? 200;
        const TooltipHostStyles = () => ({
            ...{
                root: {
                    display: 'inline-block'
                },
                content: {
                    backgroundColor: UICallout_1.CALLOUT_STYLES.background,
                    color: UICallout_1.CALLOUT_STYLES.text
                }
            },
            ...this.props.styles
        });
        const CalloutStyles = () => {
            // We can not reuse `UICallout` component from `UITooltip`, but we can reuse same styles from `UICallout` component
            // In result callout in Tooltip would look same/similar
            return (0, UICallout_1.getCalloutStyle)({
                calloutMinWidth: 0,
                // Apply some different styles
                styles: {
                    root: {
                        display: 'inline-block'
                    },
                    calloutMain: {
                        padding: 10,
                        maxWidth
                    }
                }
            });
        };
        const CalloutProps = {
            beakWidth: 10,
            styles: CalloutStyles
        };
        const tooltipHost = (react_1.default.createElement(react_2.TooltipHost, { ...this.props, styles: TooltipHostStyles, calloutProps: { ...CalloutProps, ...this.props.calloutProps } }));
        return this.props.showOnFocus ? (tooltipHost) : (react_1.default.createElement("div", { onFocusCapture: (event) => {
                if (event.target.parentElement?.classList.contains('ms-TooltipHost')) {
                    // Stop propagation to avoid display of tooltip on focus
                    event.stopPropagation();
                }
            } }, tooltipHost));
    }
}
exports.UITooltip = UITooltip;
//# sourceMappingURL=UITooltip.js.map