var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../utilities/css', '../../utilities/eventGroup/EventGroup', '../../utilities/KeyCodes'], function (require, exports, React, css_1, EventGroup_1, KeyCodes_1) {
    "use strict";
    var DIRECTIONAL_KEY_CODES = [
        KeyCodes_1.KeyCodes.up,
        KeyCodes_1.KeyCodes.down,
        KeyCodes_1.KeyCodes.left,
        KeyCodes_1.KeyCodes.right,
        KeyCodes_1.KeyCodes.home,
        KeyCodes_1.KeyCodes.end,
        KeyCodes_1.KeyCodes.tab,
        KeyCodes_1.KeyCodes.pageUp,
        KeyCodes_1.KeyCodes.pageDown
    ];
    var STATIONARY_DETECTION_DELAY = 100;
    var Fabric = (function (_super) {
        __extends(Fabric, _super);
        function Fabric() {
            _super.call(this);
            this.state = {
                isFocusVisible: false,
                isStationary: true
            };
            this._events = new EventGroup_1.EventGroup(this);
            this._onScrollEnd = this._onScrollEnd.bind(this);
        }
        Fabric.prototype.componentDidMount = function () {
            this._events.on(document.body, 'mousedown', this._onMouseDown, true);
            this._events.on(document.body, 'keydown', this._onKeyDown, true);
            this._events.on(window, 'scroll', this._onScroll, true);
        };
        Fabric.prototype.componentWillUnmount = function () {
            this._events.dispose();
            clearTimeout(this._scrollTimerId);
        };
        Fabric.prototype.render = function () {
            var _a = this.state, isFocusVisible = _a.isFocusVisible, isStationary = _a.isStationary;
            var rootClass = css_1.css('ms-Fabric ms-font-m', this.props.className, {
                'is-focusVisible': isFocusVisible,
                'is-stationary': isStationary,
                'is-scrolling': !isStationary
            });
            return (React.createElement("div", React.__spread({}, this.props, {className: rootClass, ref: 'root'})));
        };
        Fabric.prototype._onMouseDown = function () {
            if (this.state.isFocusVisible) {
                this.setState({
                    isFocusVisible: false
                });
            }
        };
        Fabric.prototype._onKeyDown = function (ev) {
            if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
                this.setState({
                    isFocusVisible: true
                });
            }
        };
        Fabric.prototype._onScroll = function () {
            var isStationary = this.state.isStationary;
            clearTimeout(this._scrollTimerId);
            if (isStationary) {
                this.setState({
                    isStationary: false
                });
            }
            this._scrollTimerId = setTimeout(this._onScrollEnd, STATIONARY_DETECTION_DELAY);
        };
        Fabric.prototype._onScrollEnd = function () {
            this.setState({
                isStationary: true
            });
        };
        return Fabric;
    }(React.Component));
    exports.Fabric = Fabric;
});
