"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 __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 Button_1 = require("./Button");
var Fixed_1 = require("./Fixed");
var Text_1 = require("./Text");
var Grid_1 = require("./Grid");
var ModalWrapper = Grid_1.Flex.extend(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  pointer-events: none;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  pointer-events: none;\n"])));
var ModalBackdrop = styled_components_1.default(Fixed_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  pointer-events: auto;\n"], ["\n  pointer-events: auto;\n"])));
var DEFAULT_MODAL_WIDTH = 700;
var ModalHeader = styled_components_1.default(Text_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-bottom: 50px;\n  font-size: 24px;\n"], ["\n  margin-bottom: 50px;\n  font-size: 24px;\n"])));
var ModalTitleDetails = styled_components_1.default(Text_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 16px;\n"], ["\n  color: ", ";\n  font-size: 16px;\n"])), function (props) { return props.theme.colors.text.light; });
var ModalPanel = styled_components_1.default(Grid_1.Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  max-width: calc(100% - 30px);\n  min-height: 50px;\n  padding: 30px 50px;\n  margin: 0 15px;\n  border: solid 0.5px #9b9b9b;\n  border-radius: 2px;\n  background-color: #ffffff;\n  z-index: 9999;\n  box-shadow: 0px 0px 60px 1px rgba(0, 0, 0, 0.4);\n  pointer-events: auto;\n"], ["\n  position: relative;\n  max-width: calc(100% - 30px);\n  min-height: 50px;\n  padding: 30px 50px;\n  margin: 0 15px;\n  border: solid 0.5px #9b9b9b;\n  border-radius: 2px;\n  background-color: #ffffff;\n  z-index: 9999;\n  box-shadow: 0px 0px 60px 1px rgba(0, 0, 0, 0.4);\n  pointer-events: auto;\n"])));
var Modal = function (_a) {
    var w = _a.w, width = _a.width, props = __rest(_a, ["w", "width"]);
    var cancelButtonProps = assign({ style: { marginRight: 20 } }, props.cancelButtonProps);
    var primaryButtonProps = assign({ primary: true }, props.primaryButtonProps);
    return (React.createElement(ModalWrapper, { align: 'center', justify: 'center' },
        React.createElement(ModalBackdrop, { z: 8888, bg: 'rgba(0,0,0,0.4)', top: true, right: true, bottom: true, left: true, onClick: function () { return (props.cancel || props.done)(); } }),
        React.createElement(ModalPanel, { w: w || width || DEFAULT_MODAL_WIDTH },
            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 }), "Cancel")),
                React.createElement(Button_1.default, __assign({}, primaryButtonProps, { onClick: props.done }), props.action)))));
};
exports.default = Modal;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
