"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 __assign = (this && this.__assign) || function () {
    __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;
    };
    return __assign.apply(this, arguments);
};
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 grommet_1 = require("grommet");
var assign = require("lodash/assign");
var React = require("react");
var styled_components_1 = require("styled-components");
var utils_1 = require("../utils");
var utils_2 = require("../utils");
var Button_1 = require("./Button");
var Grid_1 = require("./Grid");
var Txt_1 = require("./Txt");
var bodyNoOverflowClass = "rendition-modal-open";
var GlobalStyle = styled_components_1.createGlobalStyle(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 DEFAULT_MODAL_WIDTH = 700;
var ModalHeader = styled_components_1.default(Txt_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tmargin-bottom: 50px;\n\tfont-size: ", ";\n"], ["\n\tmargin-bottom: 50px;\n\tfont-size: ", ";\n"])), function (props) { return utils_2.px(props.theme.fontSizes[4]); });
var ModalTitleDetails = styled_components_1.default(Txt_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tcolor: ", ";\n\tfont-size: ", ";\n"], ["\n\tcolor: ", ";\n\tfont-size: ", ";\n"])), function (props) { return props.theme.colors.text.light; }, function (props) { return utils_2.px(props.theme.fontSizes[2]); });
var ModalSizer = styled_components_1.default(Grid_1.Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tmax-width: 100%;\n\toverflow-y: auto;\n"], ["\n\tmax-width: 100%;\n\toverflow-y: auto;\n"])));
var ModalButton = function (props) {
    return 'href' in props && props.href ? (React.createElement(Button_1.default, __assign({ as: "a" }, props))) : (React.createElement(Button_1.default, __assign({}, props)));
};
var Modal = (function (_super) {
    __extends(Modal, _super);
    function Modal(props) {
        var _this = _super.call(this, props) || this;
        _this.ownIndex = 0;
        _this.handleKeyDown = function (e) {
            if (Modal.mountedCount !== _this.ownIndex) {
                return;
            }
            if (!e.defaultPrevented && (e.which === 13 || e.which === 27)) {
                e.preventDefault();
                e.stopPropagation();
                if (e.which === 13) {
                    _this.props.done();
                }
                if (e.which === 27) {
                    (_this.props.cancel || _this.props.done)();
                }
            }
        };
        return _this;
    }
    Modal.prototype.componentDidMount = function () {
        if (!Modal.mountedCount) {
            document.body.classList.add(bodyNoOverflowClass);
        }
        window.document.addEventListener('keydown', this.handleKeyDown);
        Modal.mountedCount++;
        this.ownIndex = Modal.mountedCount;
    };
    Modal.prototype.componentWillUnmount = function () {
        Modal.mountedCount--;
        if (!Modal.mountedCount) {
            document.body.classList.remove(bodyNoOverflowClass);
        }
        window.document.removeEventListener('keydown', this.handleKeyDown);
    };
    Modal.prototype.render = function () {
        var _a = this.props, width = _a.width, theme = _a.theme, props = __rest(_a, ["width", "theme"]);
        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(grommet_1.Layer, { onEsc: function () { return (props.cancel || props.done)(); }, onClickOutside: function () { return (props.cancel || props.done)(); }, responsive: false, margin: "small", animate: false },
            React.createElement(GlobalStyle, null),
            React.createElement(ModalSizer, { p: [utils_2.px(theme.space[3]), '40px 50px 30px'], width: 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, alignItems: "center", justifyContent: "flex-end" },
                    props.cancel && (React.createElement(ModalButton, __assign({}, cancelButtonProps, { onClick: props.cancel }), (cancelButtonProps && cancelButtonProps.children) || 'Cancel')),
                    props.secondaryButtonProps && (React.createElement(ModalButton, __assign({}, secondaryButtonProps))),
                    React.createElement(ModalButton, __assign({}, primaryButtonProps, { onClick: props.done }), props.action || 'OK')))));
    };
    Modal.mountedCount = 0;
    return Modal;
}(React.Component));
exports.default = styled_components_1.withTheme(Modal);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
