define(["require", "exports", "tslib", "react", "../../Utilities", "../../Styling", "./ExpandingCard", "./ExpandingCard.Props", "./HoverCard.styles"], function (require, exports, tslib_1, React, Utilities_1, Styling_1, ExpandingCard_1, ExpandingCard_Props_1, HoverCard_styles_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var HoverCard = (function (_super) {
        tslib_1.__extends(HoverCard, _super);
        // Constructor
        function HoverCard(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                isHoverCardVisible: false,
                mode: ExpandingCard_Props_1.ExpandingCardMode.compact
            };
            return _this;
        }
        HoverCard.prototype.componentDidMount = function () {
            var target = this._getTargetElement();
            this._events.on(target, 'mouseenter', this._cardOpen);
            this._events.on(target, 'mouseleave', this._cardDismiss);
            this._events.on(target, 'focus', this._cardOpen);
            this._events.on(target, 'blur', this._cardDismiss);
            if (this.props.instantOpenOnClick) {
                this._events.on(target, 'click', this._instantOpenExpanded);
            }
            else {
                this._events.on(target, 'mousedown', this._cardDismiss);
                this._events.on(target, 'keydown', this._cardDismiss);
            }
        };
        HoverCard.prototype.componentWillUpdate = function (newProps, newState) {
            var _this = this;
            if (newState.isHoverCardVisible !== this.state.isHoverCardVisible) {
                if (newState.isHoverCardVisible) {
                    this._async.setTimeout(function () {
                        _this.setState({
                            mode: ExpandingCard_Props_1.ExpandingCardMode.expanded
                        });
                    }, this.props.expandedCardOpenDelay);
                    this.props.onCardVisible && this.props.onCardVisible();
                }
                else {
                    this.setState({
                        mode: ExpandingCard_Props_1.ExpandingCardMode.compact
                    });
                    this.props.onCardHide && this.props.onCardHide();
                }
            }
        };
        // Render
        HoverCard.prototype.render = function () {
            var _a = this.props, expandingCardProps = _a.expandingCardProps, children = _a.children, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, customStyles = _a.styles;
            var _c = this.state, isHoverCardVisible = _c.isHoverCardVisible, mode = _c.mode;
            var hoverCardId = id || Utilities_1.getId('hoverCard');
            this._styles = HoverCard_styles_1.getStyles(customStyles);
            return (React.createElement("div", { className: Styling_1.mergeStyles(this._styles.host), ref: this._resolveRef('_hoverCard'), "aria-describedby": setAriaDescribedBy && isHoverCardVisible ? hoverCardId : undefined },
                children,
                isHoverCardVisible &&
                    React.createElement(ExpandingCard_1.ExpandingCard, tslib_1.__assign({ componentRef: this._resolveRef('_expandingCard') }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { id: hoverCardId, targetElement: this._getTargetElement(), onEnter: this._cardOpen, onLeave: this._cardDismiss, mode: mode }, expandingCardProps))));
        };
        HoverCard.prototype._getTargetElement = function () {
            var target = this.props.target;
            switch (typeof target) {
                case 'string':
                    return Utilities_1.getDocument().querySelector(target);
                case 'object':
                    return target;
                default:
                    return this._hoverCard;
            }
        };
        // Show HoverCard
        HoverCard.prototype._cardOpen = function (ev) {
            var _this = this;
            this._async.clearTimeout(this._dismissTimerId);
            this._currentMouseTarget = ev.currentTarget;
            this._openTimerId = this._async.setTimeout(function () {
                if (!_this.state.isHoverCardVisible) {
                    _this.setState({
                        isHoverCardVisible: true,
                        mode: ExpandingCard_Props_1.ExpandingCardMode.compact
                    });
                }
            }, this.props.cardOpenDelay);
        };
        // Hide HoverCard
        HoverCard.prototype._cardDismiss = function (ev) {
            var _this = this;
            this._async.clearTimeout(this._openTimerId);
            // Dismiss if not sticky and currentTarget is the same element that mouse last entered
            if (!this.props.sticky && this._currentMouseTarget === ev.currentTarget) {
                this._dismissTimerId = this._async.setTimeout(function () {
                    _this.setState({
                        isHoverCardVisible: false,
                        mode: ExpandingCard_Props_1.ExpandingCardMode.compact
                    });
                }, this.props.cardDismissDelay);
            }
        };
        // Instant Open the card in Expanded mode
        HoverCard.prototype._instantOpenExpanded = function (ev) {
            this.setState({
                isHoverCardVisible: true,
                mode: ExpandingCard_Props_1.ExpandingCardMode.expanded
            });
        };
        HoverCard.defaultProps = {
            cardOpenDelay: 500,
            cardDismissDelay: 100,
            expandedCardOpenDelay: 1500,
            instantOpenOnClick: false
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], HoverCard.prototype, "_cardOpen", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], HoverCard.prototype, "_cardDismiss", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], HoverCard.prototype, "_instantOpenExpanded", null);
        return HoverCard;
    }(Utilities_1.BaseComponent));
    exports.HoverCard = HoverCard;
});
//# sourceMappingURL=HoverCard.js.map