define(["require", "exports", "tslib", "react", "react-dom", "../../Fabric", "../../Utilities", "./Layer.notification"], function (require, exports, tslib_1, React, ReactDOM, Fabric_1, Utilities_1, Layer_notification_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getClassNames = Utilities_1.classNamesFunction();
    var PortalLayerBase = /** @class */ (function (_super) {
        tslib_1.__extends(PortalLayerBase, _super);
        function PortalLayerBase(props) {
            var _this = _super.call(this, props) || this;
            _this._rootElement = Utilities_1.createRef();
            _this._warnDeprecations({
                onLayerMounted: 'onLayerDidMount'
            });
            if (_this.props.hostId) {
                Layer_notification_1.registerLayer(_this.props.hostId, _this);
            }
            return _this;
        }
        PortalLayerBase.prototype.componentWillMount = function () {
            this._layerElement = this._getLayerElement();
        };
        PortalLayerBase.prototype.componentWillUpdate = function () {
            if (!this._layerElement) {
                this._layerElement = this._getLayerElement();
            }
        };
        PortalLayerBase.prototype.componentDidMount = function () {
            this._setVirtualParent();
            var _a = this.props, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted;
            if (onLayerMounted) {
                onLayerMounted();
            }
            if (onLayerDidMount) {
                onLayerDidMount();
            }
        };
        PortalLayerBase.prototype.componentWillUnmount = function () {
            this._removeLayerElement();
            var _a = this.props, onLayerWillUnmount = _a.onLayerWillUnmount, hostId = _a.hostId;
            if (onLayerWillUnmount) {
                onLayerWillUnmount();
            }
            if (hostId) {
                Layer_notification_1.unregisterLayer(hostId, this);
            }
        };
        PortalLayerBase.prototype.componentDidUpdate = function () {
            this._setVirtualParent();
        };
        PortalLayerBase.prototype.render = function () {
            var classNames = this._getClassNames();
            return (React.createElement("span", { className: 'ms-layer', ref: this._rootElement }, this._layerElement && ReactDOM.createPortal((React.createElement(Fabric_1.Fabric, { className: classNames.content }, this.props.children)), this._layerElement)));
        };
        PortalLayerBase.prototype._getClassNames = function () {
            var _a = this.props, className = _a.className, getStyles = _a.getStyles, theme = _a.theme;
            var classNames = getClassNames(getStyles, {
                theme: theme,
                className: className,
                isNotHost: !this.props.hostId
            });
            return classNames;
        };
        PortalLayerBase.prototype._setVirtualParent = function () {
            if (this._rootElement && this._rootElement.current && this._layerElement) {
                Utilities_1.setVirtualParent(this._layerElement, this._rootElement.current);
            }
        };
        PortalLayerBase.prototype._getLayerElement = function () {
            var host = this._getHost();
            var classNames = this._getClassNames();
            if (host !== this._host) {
                this._removeLayerElement();
            }
            if (host) {
                this._host = host;
                if (!this._layerElement) {
                    var doc = Utilities_1.getDocument();
                    if (!doc) {
                        return;
                    }
                    this._layerElement = doc.createElement('div');
                    this._layerElement.className = classNames.root;
                    host.appendChild(this._layerElement);
                }
            }
            return this._layerElement;
        };
        PortalLayerBase.prototype._removeLayerElement = function () {
            if (this._layerElement) {
                this.props.onLayerWillUnmount();
                var parentNode = this._layerElement.parentNode;
                if (parentNode) {
                    parentNode.removeChild(this._layerElement);
                }
                this._layerElement = undefined;
            }
        };
        PortalLayerBase.prototype._getHost = function () {
            var hostId = this.props.hostId;
            var doc = Utilities_1.getDocument();
            if (!doc) {
                return undefined;
            }
            if (hostId) {
                return doc.getElementById(hostId);
            }
            else {
                var defaultHostSelector = Layer_notification_1.getDefaultTarget();
                return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body;
            }
        };
        PortalLayerBase.defaultProps = {
            onLayerDidMount: function () { return undefined; },
            onLayerWillUnmount: function () { return undefined; }
        };
        PortalLayerBase = tslib_1.__decorate([
            Utilities_1.customizable('Layer', ['theme', 'hostId'])
        ], PortalLayerBase);
        return PortalLayerBase;
    }(Utilities_1.BaseComponent));
    exports.PortalLayerBase = PortalLayerBase;
});
//# sourceMappingURL=PortalLayer.base.js.map