"use strict";
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 __());
    };
})();
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var ReactDOM = __importStar(require("react-dom"));
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("./styleConstants");
var ModalOuter = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: rgba(255, 255, 255, 0.7);\n  display: flex;\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n  text-align: ", ";\n  z-index: 100001;\n"], ["\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: rgba(255, 255, 255, 0.7);\n  display: flex;\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n  text-align: ", ";\n  z-index: 100001;\n"])), function (props) { return (props.visible ? "flex" : "none"); }, function (props) { return props.textAlign || "left"; });
var ModalInner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.4);\n  max-width: ", "px;\n  padding: ", ";\n  background: #fff;\n  ", " ", " {\n    max-height: 100%;\n    max-width: 100%;\n    overflow: scroll;\n    padding-top: 65px;\n    margin-right: 10px;\n    margin-left: 10px;\n  }\n"], ["\n  box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.4);\n  max-width: ", "px;\n  padding: ", ";\n  background: #fff;\n  ",
    " ", " {\n    max-height: 100%;\n    max-width: 100%;\n    overflow: scroll;\n    padding-top: 65px;\n    margin-right: 10px;\n    margin-left: 10px;\n  }\n"])), function (props) { return props.width || 400; }, function (props) { return props.padding || "35px 35px 50px 35px"; }, function (props) {
    if (props.fullScreen) {
        return "max-width: 100%; width: 100%; height: 100%; overflow: scroll;";
    }
    return "";
}, styleConstants_1.mediaQueries.MOBILE);
var Modal = /** @class */ (function (_super) {
    __extends(Modal, _super);
    function Modal(props) {
        var _this = _super.call(this, props) || this;
        _this.bucket = document.createElement("div");
        _this.state = {
            visible: _this.props.visible || true,
        };
        return _this;
    }
    // tslint:disable-next-line
    Modal.getDerivedStateFromProps = function (props, state) {
        if (typeof props.visible !== "undefined") {
            var visible = props.visible;
            return { visible: visible };
        }
        return null;
    };
    Modal.prototype.componentDidMount = function () {
        document.body.appendChild(this.bucket);
    };
    Modal.prototype.componentWillUnmount = function () {
        document.body.removeChild(this.bucket);
    };
    Modal.prototype.render = function () {
        var _this = this;
        return ReactDOM.createPortal(React.createElement(ModalOuter, { visible: this.state.visible, textAlign: this.props.textAlign, onClick: function () {
                if (_this.props.onOuterClicked) {
                    _this.props.onOuterClicked();
                }
            } },
            React.createElement(ModalInner, { width: this.props.width, fullScreen: this.props.fullScreen, padding: this.props.padding, onClick: function (ev) {
                    ev.stopPropagation();
                } }, this.props.children)), this.bucket);
    };
    return Modal;
}(React.Component));
exports.Modal = Modal;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Modal.js.map