var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import ReactDOM from 'react-dom';
import { PORTAL_INLET_ATTR } from './RenderContainer.js';
var KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];
// Заглушка нужна для корректной гидрации порталов после SSR,
// которую реакт сам пока не поддерживает.
// @see https://github.com/facebook/react/issues/13097
// А также для вставки актуального render-container-id на клиенте.
//
// Дело в том, что во время гидрации, структура HTML на сервере
// и на клиенте должна совпадать, иначе возможны артефакты.
// Алгоритм там примерно такой. Клиент во время гидрации идет
// по этим двум деревьям и сравнивает узлы. Элементы разных типов
// он подменяет на свои. А те, что совпадают, он оставляет как есть
// вместе со всеми атрибутами, навесив только обработчики событий.
//
// Поэтому, для портала, который рендерится только на клиенте,
// нужно использовать серверную заглушку, чтобы при гидрации
// он не испортил какой-то другой элемент. Null не подходит,
// т.к. на сервере он тоже не рендерится.
// А элемент с render-container-id нужно отрендерить с нуля.
var SSRPlaceholder = function () { return React.createElement("script", { "data-id": "ssr-placeholder" }); };
export var Portal = function (_a) {
    var _b;
    var container = _a.container, rt_rootID = _a.rt_rootID, children = _a.children;
    // container exists only in browser
    return (React.createElement(React.Fragment, null,
        container ? ReactDOM.createPortal(children, container) : React.createElement(SSRPlaceholder, null),
        container ? React.createElement("noscript", (_b = {}, _b[PORTAL_INLET_ATTR] = rt_rootID, _b)) : React.createElement(SSRPlaceholder, null)));
};
var RenderInnerContainer = /** @class */ (function (_super) {
    __extends(RenderInnerContainer, _super);
    function RenderInnerContainer() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.kColorsCheckerRef = React.createRef();
        return _this;
    }
    RenderInnerContainer.prototype.componentDidMount = function () {
        this.applyKonturColorsAttributes();
    };
    RenderInnerContainer.prototype.componentDidUpdate = function () {
        this.applyKonturColorsAttributes();
    };
    RenderInnerContainer.prototype.applyKonturColorsAttributes = function () {
        var _a;
        var domContainer = this.props.domContainer;
        var source = (_a = this.kColorsCheckerRef.current) === null || _a === void 0 ? void 0 : _a.closest(KONTUR_COLORS_ATTRIBUTES.map(function (x) { return "[".concat(x, "]"); }).join(','));
        for (var _i = 0, KONTUR_COLORS_ATTRIBUTES_1 = KONTUR_COLORS_ATTRIBUTES; _i < KONTUR_COLORS_ATTRIBUTES_1.length; _i++) {
            var attribute = KONTUR_COLORS_ATTRIBUTES_1[_i];
            var value = source === null || source === void 0 ? void 0 : source.getAttribute(attribute);
            if (value) {
                domContainer === null || domContainer === void 0 ? void 0 : domContainer.setAttribute(attribute, value);
            }
        }
    };
    RenderInnerContainer.prototype.render = function () {
        var _a = this.props, anchor = _a.anchor, children = _a.children, domContainer = _a.domContainer, rootId = _a.rootId;
        var inner = anchor;
        if (children) {
            inner = (React.createElement(React.Fragment, null,
                anchor,
                React.createElement(Portal, { key: "portal-ref", rt_rootID: rootId, container: domContainer }, children),
                React.createElement("span", { ref: this.kColorsCheckerRef, style: { display: 'none' } })));
        }
        return inner;
    };
    RenderInnerContainer.__KONTUR_REACT_UI__ = 'RenderInnerContainer';
    RenderInnerContainer.displayName = 'RenderInnerContainer';
    return RenderInnerContainer;
}(React.Component));
export { RenderInnerContainer };
Portal.__KONTUR_REACT_UI__ = 'Portal';
Portal.displayName = 'Portal';
//# sourceMappingURL=RenderInnerContainer.js.map