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 isString from 'lodash/isString';
import React from 'react';
import styled from '@monstrosity/utilities/themed-components';
import { IconName } from '@monstrosity/enums';
import { Clickable, ClickableRoot } from '../../primitives/Clickable/clickable';
import { Icon } from '..';
import { Scrollable } from '../../primitives/Scrollable/scrollable';
var ModalContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\twidth: ", ";\n\tposition: absolute;\n\tmin-height: 4rem;\n\tbox-shadow: 0.25rem 0.25rem 0.5rem ", ";\n\tborder-radius: 0.25rem;\n\tbackground-color: ", ";\n\tborder:", ";\n\tcolor: ", ";\n\tz-index: ", ";\n"], ["\n\twidth: ", ";\n\tposition: absolute;\n\tmin-height: 4rem;\n\tbox-shadow: 0.25rem 0.25rem 0.5rem ", ";\n\tborder-radius: 0.25rem;\n\tbackground-color: ", ";\n\tborder:", ";\n\tcolor: ", ";\n\tz-index: ", ";\n"])), function (_a) {
    var width = _a.width;
    return width || '34.5rem';
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.shadow;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.background;
}, function (_a) {
    var theme = _a.theme, hideHeader = _a.hideHeader;
    return hideHeader ? "1px solid " + theme.style.colour.text.light : 'unset';
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
}, function (_a) {
    var theme = _a.theme;
    return theme.zIndex.modal;
});
export var ModalBody = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tpadding: ", ";\n\tborder-top: 1px solid  ", ";\n\tborder-bottom: ", ";\n\tmax-height: 70vh;\n"], ["\n\tpadding: ", ";\n\tborder-top: 1px solid  ", ";\n\tborder-bottom: ", ";\n\tmax-height: 70vh;\n"])), function (_a) {
    var noBorder = _a.noBorder;
    return noBorder ? 'unset' : '1rem 1.25rem';
}, function (_a) {
    var theme = _a.theme, noBorder = _a.noBorder;
    return noBorder ? 'transparent' : theme.style.colour.backset;
}, function (_a) {
    var theme = _a.theme, hasFooter = _a.hasFooter;
    return hasFooter ? "1px solid " + theme.style.colour.backset : 'none';
});
var Header = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tborder-radius: 4px 4px 0 0;\n\tpadding-left: 1.25rem;\n\tpadding-right: 1.25rem;\n\tfont-weight: ", ";\n\tdisplay: flex;\n\theight: 2.85rem;\n\talign-items: center;\n\tjustify-content: space-between;\n\n  \t", " {\n  \t\tmargin-left: auto;\n\t}\n"], ["\n\tborder-radius: 4px 4px 0 0;\n\tpadding-left: 1.25rem;\n\tpadding-right: 1.25rem;\n\tfont-weight: ", ";\n\tdisplay: flex;\n\theight: 2.85rem;\n\talign-items: center;\n\tjustify-content: space-between;\n\n  \t", " {\n  \t\tmargin-left: auto;\n\t}\n"])), function (_a) {
    var hasTitle = _a.hasTitle;
    return hasTitle ? 500 : 'unset';
}, ClickableRoot);
var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 2rem;\n  display: flex;\n  padding: 1rem 1.25rem;\n  align-items: center;\n  justify-content: flex-end;\n  margin: 1rem 0;\n"], ["\n  height: 2rem;\n  display: flex;\n  padding: 1rem 1.25rem;\n  align-items: center;\n  justify-content: flex-end;\n  margin: 1rem 0;\n"])));
var Modal = /** @class */ (function (_super) {
    __extends(Modal, _super);
    function Modal() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onMaskClick = function (e) {
            _this.props.onClose();
        };
        _this.getHeader = function () {
            var _a = _this.props, hideHeader = _a.hideHeader, header = _a.header, onClose = _a.onClose;
            if (hideHeader && !header)
                return null;
            return (React.createElement(Header, { hasTitle: isString(header) },
                header,
                React.createElement(Clickable, { onClick: onClose, ariaLabel: "close" },
                    React.createElement(Icon, { icon: IconName.X, size: "1rem" }))));
        };
        return _this;
    }
    Modal.prototype.render = function () {
        var _a = this.props, children = _a.children, footer = _a.footer, width = _a.width, header = _a.header;
        return (React.createElement(ModalContent, { width: width },
            this.getHeader(),
            React.createElement(Scrollable, null,
                React.createElement(ModalBody, { hasFooter: !!footer, noBorder: !header }, children)),
            footer &&
                React.createElement(Footer, null, footer)));
    };
    return Modal;
}(React.PureComponent));
export { Modal };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
