"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Fabric_styles_1 = require("./Fabric.styles");
var getClassNames = Utilities_1.classNamesFunction();
var getRTLTheme = Utilities_1.memoizeFunction(function (theme, isRTL) { return (tslib_1.__assign({}, theme, { rtl: isRTL })); });
var FabricBase = /** @class */ (function (_super) {
    tslib_1.__extends(FabricBase, _super);
    function FabricBase(props) {
        var _this = _super.call(this, props) || this;
        _this._rootElement = React.createRef();
        _this._disposables = [];
        _this._removeClassNameFromBody = undefined;
        _this._onMouseDown = function (ev) {
            _this.setState({ isFocusVisible: false });
        };
        _this._onKeyDown = function (ev) {
            if (Utilities_1.isDirectionalKeyCode(ev.which)) {
                _this.setState({ isFocusVisible: true });
            }
        };
        _this.state = { isFocusVisible: false };
        return _this;
    }
    FabricBase.prototype.render = function () {
        var _a = this.props, _b = _a.as, Root = _b === void 0 ? 'div' : _b, theme = _a.theme, dir = _a.dir;
        var classNames = this._getClassNames();
        var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
        var isRTL = dir === 'rtl';
        var renderedContent = React.createElement(Root, tslib_1.__assign({}, divProps, { className: classNames.root, ref: this._rootElement }));
        // Expose an rtl based theme if dir is specified and it doesn't agree with the theme setting.
        if (dir !== undefined && theme && (theme.rtl === undefined || theme.rtl !== isRTL)) {
            renderedContent = React.createElement(Utilities_1.Customizer, { settings: { theme: getRTLTheme(theme, isRTL) } }, renderedContent);
        }
        return renderedContent;
    };
    FabricBase.prototype.componentDidMount = function () {
        var win = Utilities_1.getWindow(this._rootElement.current);
        if (win) {
            this._disposables.push(Utilities_1.on(win, 'mousedown', this._onMouseDown, true), Utilities_1.on(win, 'keydown', this._onKeyDown, true));
        }
        this._addClassNameToBody();
    };
    FabricBase.prototype.componentWillUnmount = function () {
        this._disposables.forEach(function (dispose) { return dispose(); });
        if (this._removeClassNameFromBody) {
            this._removeClassNameFromBody();
        }
    };
    FabricBase.prototype._getClassNames = function () {
        var _a = this.props, className = _a.className, theme = _a.theme, applyTheme = _a.applyTheme;
        var classNames = getClassNames(Fabric_styles_1.getStyles, {
            theme: theme,
            applyTheme: applyTheme,
            className: className,
            isFocusVisible: this.state.isFocusVisible
        });
        return classNames;
    };
    FabricBase.prototype._addClassNameToBody = function () {
        if (this.props.applyThemeToBody) {
            var classNames_1 = this._getClassNames();
            var currentDoc_1 = Utilities_1.getDocument(this._rootElement.current);
            if (currentDoc_1) {
                currentDoc_1.body.classList.add(classNames_1.bodyThemed);
                this._removeClassNameFromBody = function () {
                    currentDoc_1.body.classList.remove(classNames_1.bodyThemed);
                };
            }
        }
    };
    return FabricBase;
}(React.Component));
exports.FabricBase = FabricBase;
//# sourceMappingURL=Fabric.base.js.map