"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var Styling_1 = require("../../Styling");
var ExpandingCard_1 = require("./ExpandingCard");
var ExpandingCard_types_1 = require("./ExpandingCard.types");
var HoverCard_styles_1 = require("./HoverCard.styles");
var HoverCard = /** @class */ (function (_super) {
    tslib_1.__extends(HoverCard, _super);
    // Constructor
    function HoverCard(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isHoverCardVisible: false,
            mode: ExpandingCard_types_1.ExpandingCardMode.compact,
            openMode: ExpandingCard_types_1.OpenCardMode.hover
        };
        return _this;
    }
    HoverCard.prototype.componentDidMount = function () {
        var target = this._getTargetElement();
        this._events.on(target, 'mouseenter', this._cardOpen);
        this._events.on(target, 'mouseleave', this._cardDismiss);
        if (this.props.trapFocus) {
            this._events.on(target, 'keydown', this._cardOpen);
        }
        else {
            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.componentDidUpdate = function (prevProps, prevState) {
        var _this = this;
        if (prevState.isHoverCardVisible !== this.state.isHoverCardVisible) {
            if (this.state.isHoverCardVisible) {
                this._async.setTimeout(function () {
                    _this.setState({
                        mode: ExpandingCard_types_1.ExpandingCardMode.expanded
                    });
                }, this.props.expandedCardOpenDelay);
                this.props.onCardVisible && this.props.onCardVisible();
            }
            else {
                this.setState({
                    mode: ExpandingCard_types_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, openMode = _c.openMode;
        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, trapFocus: !!this.props.trapFocus, firstFocus: openMode === ExpandingCard_types_1.OpenCardMode.hotKey, targetElement: this._getTargetElement(), onEnter: this._cardOpen, onLeave: this._executeCardDimiss, 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) {
        if (ev.type === 'keydown' && !(ev.which === 67 /* c */)) {
            return;
        }
        this._async.clearTimeout(this._dismissTimerId);
        if (ev.type === 'mouseenter') {
            this._currentMouseTarget = ev.currentTarget;
        }
        this._executeCardOpen(ev);
    };
    HoverCard.prototype._executeCardOpen = function (ev) {
        var _this = this;
        this._async.clearTimeout(this._openTimerId);
        this._openTimerId = this._async.setTimeout(function () {
            _this.setState(function (prevState) {
                if (!prevState.isHoverCardVisible) {
                    return ({
                        isHoverCardVisible: true,
                        mode: ExpandingCard_types_1.ExpandingCardMode.compact,
                        openMode: ev.type === 'keydown' ? ExpandingCard_types_1.OpenCardMode.hotKey : ExpandingCard_types_1.OpenCardMode.hover
                    });
                }
            });
        }, this.props.cardOpenDelay);
    };
    // Hide HoverCard
    HoverCard.prototype._cardDismiss = function (ev) {
        if (ev.type === 'keydown' && (ev.which !== 27 /* escape */)) {
            return;
        }
        // Dismiss if not sticky and currentTarget is the same element that mouse last entered
        if (!this.props.sticky && (this._currentMouseTarget === ev.currentTarget || (ev.which === 27 /* escape */))) {
            this._executeCardDimiss();
        }
    };
    HoverCard.prototype._executeCardDimiss = function () {
        var _this = this;
        this._async.clearTimeout(this._openTimerId);
        this._async.clearTimeout(this._dismissTimerId);
        this._dismissTimerId = this._async.setTimeout(function () {
            _this.setState({
                isHoverCardVisible: false,
                mode: ExpandingCard_types_1.ExpandingCardMode.compact,
                openMode: ExpandingCard_types_1.OpenCardMode.hover
            });
        }, this.props.cardDismissDelay);
    };
    // Instant Open the card in Expanded mode
    HoverCard.prototype._instantOpenExpanded = function (ev) {
        this._async.clearTimeout(this._dismissTimerId);
        this.setState(function (prevState) {
            if (!prevState.isHoverCardVisible) {
                return ({
                    isHoverCardVisible: true,
                    mode: ExpandingCard_types_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, "_executeCardOpen", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], HoverCard.prototype, "_cardDismiss", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], HoverCard.prototype, "_executeCardDimiss", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], HoverCard.prototype, "_instantOpenExpanded", null);
    return HoverCard;
}(Utilities_1.BaseComponent));
exports.HoverCard = HoverCard;
//# sourceMappingURL=HoverCard.js.map