"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var TooltipHost_types_1 = require("./TooltipHost.types");
var Tooltip_1 = require("./Tooltip");
var Tooltip_types_1 = require("./Tooltip.types");
var stylesImport = require("./TooltipHost.scss");
var styles = stylesImport;
var TooltipHost = /** @class */ (function (_super) {
    tslib_1.__extends(TooltipHost, _super);
    // Constructor
    function TooltipHost(props) {
        var _this = _super.call(this, props) || this;
        // The wrapping div that gets the hover events
        _this._tooltipHost = Utilities_1.createRef();
        // The ID of the setTimeout that will eventually close the tooltip if the
        // the tooltip isn't hovered over.
        _this._closingTimer = -1;
        // Show Tooltip
        _this._onTooltipMouseEnter = function (ev) {
            var overflowMode = _this.props.overflowMode;
            if (overflowMode !== undefined) {
                var overflowElement = _this._getTargetElement();
                if (overflowElement && !Utilities_1.hasOverflow(overflowElement)) {
                    return;
                }
            }
            _this._toggleTooltip(true);
            _this._clearDismissTimer();
        };
        // Hide Tooltip
        _this._onTooltipMouseLeave = function (ev) {
            if (_this.props.closeDelay) {
                _this._clearDismissTimer();
                _this._closingTimer = _this._async.setTimeout(function () {
                    _this._toggleTooltip(false);
                }, _this.props.closeDelay);
            }
            else {
                _this._toggleTooltip(false);
            }
        };
        _this._clearDismissTimer = function () {
            _this._async.clearTimeout(_this._closingTimer);
        };
        // Hide Tooltip
        _this._hideTooltip = function () {
            _this._toggleTooltip(false);
        };
        _this.state = {
            isTooltipVisible: false
        };
        return _this;
    }
    // Render
    TooltipHost.prototype.render = function () {
        var _a = this.props, calloutProps = _a.calloutProps, children = _a.children, content = _a.content, delay = _a.delay, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, hostClassName = _a.hostClassName, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, tooltipProps = _a.tooltipProps;
        var isTooltipVisible = this.state.isTooltipVisible;
        var tooltipId = id || Utilities_1.getId('tooltip');
        var isContentPresent = !!(content ||
            (tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent()));
        var showTooltip = isTooltipVisible && isContentPresent;
        return (React.createElement("div", tslib_1.__assign({ className: Utilities_1.css('ms-TooltipHost', styles.host, hostClassName), ref: this._tooltipHost }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._hideTooltip }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, "aria-describedby": setAriaDescribedBy && isTooltipVisible && content ? tooltipId : undefined }),
            children,
            showTooltip && (React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({ id: tooltipId, delay: delay, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: Utilities_1.assign({}, calloutProps, {
                    onMouseEnter: this._onTooltipMouseEnter,
                    onMouseLeave: this._onTooltipMouseLeave
                }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), tooltipProps)))));
    };
    TooltipHost.prototype._getTargetElement = function () {
        if (!this._tooltipHost.current) {
            return undefined;
        }
        var overflowMode = this.props.overflowMode;
        // Select target element based on overflow mode. For parent mode, you want to position the tooltip relative
        // to the parent element, otherwise it might look off.
        if (overflowMode !== undefined) {
            switch (overflowMode) {
                case TooltipHost_types_1.TooltipOverflowMode.Parent:
                    return this._tooltipHost.current.parentElement;
                case TooltipHost_types_1.TooltipOverflowMode.Self:
                    return this._tooltipHost.current;
            }
        }
        return this._tooltipHost.current;
    };
    TooltipHost.prototype._toggleTooltip = function (isTooltipVisible) {
        var _this = this;
        if (this.state.isTooltipVisible !== isTooltipVisible) {
            this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(_this.state.isTooltipVisible); });
        }
    };
    TooltipHost.defaultProps = {
        delay: Tooltip_types_1.TooltipDelay.medium
    };
    return TooltipHost;
}(Utilities_1.BaseComponent));
exports.TooltipHost = TooltipHost;
//# sourceMappingURL=TooltipHost.js.map