import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
/* tslint:enable:no-unused-variable */
import { Fabric } from '../../Fabric';
import { BaseComponent, classNamesFunction, customizable, getDocument, createRef, setVirtualParent } from '../../Utilities';
import { registerLayer, getDefaultTarget, unregisterLayer } from './Layer.notification';
var getClassNames = classNamesFunction();
var PortalLayerBase = /** @class */ (function (_super) {
    tslib_1.__extends(PortalLayerBase, _super);
    function PortalLayerBase(props) {
        var _this = _super.call(this, props) || this;
        _this._rootElement = createRef();
        _this._warnDeprecations({
            onLayerMounted: 'onLayerDidMount'
        });
        if (_this.props.hostId) {
            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) {
            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, { 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) {
            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 = 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 = getDocument();
        if (!doc) {
            return undefined;
        }
        if (hostId) {
            return doc.getElementById(hostId);
        }
        else {
            var defaultHostSelector = getDefaultTarget();
            return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body;
        }
    };
    PortalLayerBase.defaultProps = {
        onLayerDidMount: function () { return undefined; },
        onLayerWillUnmount: function () { return undefined; }
    };
    PortalLayerBase = tslib_1.__decorate([
        customizable('Layer', ['theme', 'hostId'])
    ], PortalLayerBase);
    return PortalLayerBase;
}(BaseComponent));
export { PortalLayerBase };
//# sourceMappingURL=PortalLayer.base.js.map