"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 = 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var assign = require("lodash/assign");
var React = require("react");
var styled_components_1 = require("styled-components");
var utils_1 = require("../utils");
var Button_1 = require("./Button");
var Fixed_1 = require("./Fixed");
var Grid_1 = require("./Grid");
var Txt_1 = require("./Txt");
var bodyNoOverflowClass = "rendition-modal-open";
styled_components_1.injectGlobal(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t.", " {\n\t\toverflow: hidden;\n\t}\n"], ["\n\t.", " {\n\t\toverflow: hidden;\n\t}\n"])), bodyNoOverflowClass);
var ModalWrapper = styled_components_1.default(Grid_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tz-index: 9999;\n\tpointer-events: none;\n"], ["\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tz-index: 9999;\n\tpointer-events: none;\n"])));
var ModalBackdrop = styled_components_1.default(Fixed_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tpointer-events: auto;\n"], ["\n\tpointer-events: auto;\n"])));
var DEFAULT_MODAL_WIDTH = 700;
var ModalHeader = styled_components_1.default(Txt_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tmargin-bottom: 50px;\n\tfont-size: 24px;\n"], ["\n\tmargin-bottom: 50px;\n\tfont-size: 24px;\n"])));
var ModalTitleDetails = styled_components_1.default(Txt_1.default)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tcolor: ", ";\n\tfont-size: 16px;\n"], ["\n\tcolor: ", ";\n\tfont-size: 16px;\n"])), function (props) { return props.theme.colors.text.light; });
var ModalSizer = styled_components_1.default(Grid_1.Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tposition: relative;\n\twidth: 100%;\n\tmax-height: 100%;\n\tpadding: 0 15px;\n\toverflow-y: auto;\n\tbackground-color: transparent;\n\tz-index: 9999;\n\tpointer-events: auto;\n"], ["\n\tposition: relative;\n\twidth: 100%;\n\tmax-height: 100%;\n\tpadding: 0 15px;\n\toverflow-y: auto;\n\tbackground-color: transparent;\n\tz-index: 9999;\n\tpointer-events: auto;\n"])));
var ModalPanel = styled_components_1.default(Grid_1.Box)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tmax-width: 100%;\n\tmin-height: 50px;\n\tpadding: 30px 50px;\n\tmargin: 15px auto;\n\tborder: solid 0.5px #9b9b9b;\n\tborder-radius: 2px;\n\tbackground-color: #ffffff;\n\tbox-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.4);\n"], ["\n\tmax-width: 100%;\n\tmin-height: 50px;\n\tpadding: 30px 50px;\n\tmargin: 15px auto;\n\tborder: solid 0.5px #9b9b9b;\n\tborder-radius: 2px;\n\tbackground-color: #ffffff;\n\tbox-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.4);\n"])));
var Modal = (function (_super) {
    __extends(Modal, _super);
    function Modal(props) {
        return _super.call(this, props) || this;
    }
    Modal.prototype.componentDidMount = function () {
        if (!Modal.mountedCount) {
            document.body.classList.add(bodyNoOverflowClass);
        }
        Modal.mountedCount++;
    };
    Modal.prototype.componentWillUnmount = function () {
        Modal.mountedCount--;
        if (!Modal.mountedCount) {
            document.body.classList.remove(bodyNoOverflowClass);
        }
    };
    Modal.prototype.render = function () {
        var _a = this.props, w = _a.w, width = _a.width, props = __rest(_a, ["w", "width"]);
        var cancelButtonProps = assign({ style: { marginRight: 20 } }, props.cancelButtonProps);
        var secondaryButtonProps = assign({
            primary: true,
            outline: true,
            style: { marginRight: 20 },
        }, props.secondaryButtonProps);
        var primaryButtonProps = assign({ primary: true }, props.primaryButtonProps);
        return (React.createElement(ModalWrapper, { align: "center", justify: "center", onClick: function () { return (props.cancel || props.done)(); } },
            React.createElement(ModalBackdrop, { z: 8888, bg: "rgba(0,0,0,0.4)", top: true, right: true, bottom: true, left: true }),
            React.createElement(ModalSizer, { style: props.containerStyle },
                React.createElement(ModalPanel, { w: w || width || DEFAULT_MODAL_WIDTH, onClick: utils_1.stopPropagation, style: props.style },
                    props.titleElement ? (React.createElement(ModalHeader, null, props.titleElement)) : (!!props.title && (React.createElement(ModalHeader, null,
                        React.createElement("strong", null, props.title),
                        !!props.titleDetails && (React.createElement(ModalTitleDetails, null, props.titleDetails))))),
                    props.children,
                    React.createElement(Grid_1.Flex, { mt: 50, align: "center", justify: "flex-end" },
                        props.cancel && (React.createElement(Button_1.default, __assign({}, cancelButtonProps, { onClick: props.cancel }), (cancelButtonProps && cancelButtonProps.children) ||
                            'Cancel')),
                        props.secondaryButtonProps && (React.createElement(Button_1.default, __assign({}, secondaryButtonProps))),
                        React.createElement(Button_1.default, __assign({}, primaryButtonProps, { onClick: props.done }), props.action || 'OK'))))));
    };
    Modal.mountedCount = 0;
    return Modal;
}(React.Component));
exports.default = Modal;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
