var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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 (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import styled from 'react-emotion';
var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
var BloqShapeContainer = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: -10px;\n  left: -10px;\n"], ["\n  position: absolute;\n  top: -10px;\n  left: -10px;\n"])));
var PropertiesBloq = /** @class */ (function (_super) {
    __extends(PropertiesBloq, _super);
    function PropertiesBloq() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.containerRef = React.createRef();
        _this.state = {
            width: 0,
            height: 0,
        };
        return _this;
    }
    PropertiesBloq.prototype.componentDidMount = function () {
        this.updateSize();
    };
    PropertiesBloq.prototype.componentDidUpdate = function () {
        this.updateSize();
    };
    PropertiesBloq.prototype.updateSize = function () {
        var container = this.containerRef.current;
        if (container) {
            var _a = container.getBoundingClientRect(), width = _a.width, height = _a.height;
            if (width !== this.state.width || height !== this.state.height) {
                this.setState({ width: width, height: height });
            }
        }
    };
    PropertiesBloq.prototype.render = function () {
        var _a = this.props, children = _a.children, isTop = _a.isTop;
        var _b = this.state, width = _b.width, height = _b.height;
        var path = "\n      m 10,16\n      a 6,6 0 0,1 6,-6\n      " + (!isTop
            ? 'H 60 a 9,9 0 0,0 18,0'
            : '') + "\n      H " + (width + 4) + "\n      a 6,6 0 0,1 6,6\n      V " + (height + 4) + "\n      a 6,6 0 0,1 -6,6\n      H 78\n      a 9,9 0 0,1 -18,0\n      H 16\n      a 6,6 0 0,1 -6,-6\n      V 16\n    ";
        return (React.createElement(Wrap, null,
            React.createElement(BloqShapeContainer, { width: width + 20, height: height + 20 },
                React.createElement("path", { fill: "#ffffff", stroke: "#979797", d: path })),
            React.createElement(Container, { innerRef: this.containerRef }, children)));
    };
    return PropertiesBloq;
}(React.Component));
export default PropertiesBloq;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=PropertiesBloq.js.map