"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) || 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 React = require("react");
var FaCheckCircle = require("react-icons/lib/fa/check-circle");
var FaClose = require("react-icons/lib/fa/close");
var FaExclamationCircle = require("react-icons/lib/fa/exclamation-circle");
var FaExclamationTriangle = require("react-icons/lib/fa/exclamation-triangle");
var FaInfoCircle = require("react-icons/lib/fa/info-circle");
var styled_components_1 = require("styled-components");
var asRendition_1 = require("../asRendition");
var utils_1 = require("../utils");
var Grid_1 = require("./Grid");
var getPadding = function (props) {
    return props.emphasized ? '15px 40px' : '8px 32px';
};
var getTitle = function (props) {
    if (props.prefix === false) {
        return;
    }
    if (props.prefix !== undefined) {
        return props.prefix;
    }
    return props.danger
        ? 'Oh no!'
        : props.warning
            ? 'Warning!'
            : props.success
                ? 'Great!'
                : props.info
                    ? 'Hey!'
                    : '';
};
var AlertTitle = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tmargin-right: 8px;\n"], ["\n\tdisplay: inline-flex;\n\tmargin-right: 8px;\n"])));
var DismissButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: ", "\n"], ["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: ", "\n"])), function (props) { return utils_1.px(props.emphasized ? 20 : 12); });
var DismissButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tpadding: 0;\n\tborder: 0;\n\tbackground: none;\n\tline-height: 0;\n\tfont-size: 14px;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tcolor: black;\n\t}\n"], ["\n\tpadding: 0;\n\tborder: 0;\n\tbackground: none;\n\tline-height: 0;\n\tfont-size: 14px;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tcolor: black;\n\t}\n"])));
var AlertBase = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: normal;\n\n\tposition: relative;\n\tmin-height: ", ";\n\tpadding: ", ";\n\tmargin: 0;\n\tborder-radius: ", ";\n\tfont-family: inherit;\n\tfont-size: 16px;\n\tfont-kerning: none;\n\tfont-weight: ", ";\n\tappearance: none;\n\ttext-decoration: none;\n\tvertical-align: middle;\n\tline-height: 1.1;\n"], ["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: normal;\n\n\tposition: relative;\n\tmin-height: ",
    ";\n\tpadding: ", ";\n\tmargin: 0;\n\tborder-radius: ", ";\n\tfont-family: inherit;\n\tfont-size: 16px;\n\tfont-kerning: none;\n\tfont-weight: ", ";\n\tappearance: none;\n\ttext-decoration: none;\n\tvertical-align: middle;\n\tline-height: 1.1;\n"])), function (props) {
    return utils_1.px(props.emphasized ? props.theme.space[5] : props.theme.space[4]);
}, function (props) { return getPadding(props); }, function (props) { return utils_1.px(props.theme.radius); }, function (props) { return utils_1.normal(props); });
var Outline = AlertBase.extend(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tpadding-left: 19px;\n\tborder: 1px solid ", ";\n\tbackground: ", ";\n\tcolor: ", ";\n\n\t& ", ", & ", " > ", " {\n\t\tfont-weight: ", ";\n\t\tcolor: ", ";\n\t}\n"], ["\n\tpadding-left: 19px;\n\tborder: 1px solid ", ";\n\tbackground: ", ";\n\tcolor: ", ";\n\n\t& ", ", & ", " > ", " {\n\t\tfont-weight: ", ";\n\t\tcolor: ", ";\n\t}\n"])), function (props) { return utils_1.getColor(props, 'bg', 'main'); }, function (props) { return props.bg || utils_1.getColor(props, 'bg', 'light'); }, function (props) { return props.theme.colors.text.main; }, AlertTitle, DismissButtonWrapper, DismissButton, function (props) { return utils_1.bold(props); }, function (props) { return utils_1.getColor(props, 'color', 'main'); });
var Filled = AlertBase.extend(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tborder: 0;\n\tfont-weight: ", ";\n\ttext-align: center;\n\tbackground: ", ";\n\tcolor: ", ";\n"], ["\n\tborder: 0;\n\tfont-weight: ", ";\n\ttext-align: center;\n\tbackground: ", ";\n\tcolor: ", ";\n"])), function (props) { return utils_1.bold(props); }, function (props) { return props.bg || utils_1.getColor(props, 'bg', 'main'); }, function (props) { return props.color || '#fff'; });
var Plaintext = AlertBase.extend(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tmin-height: auto;\n\tpadding: 0;\n\tfont-size: 14px;\n\n\t&,\n\t& ", " > ", " {\n\t\tcolor: ", ";\n\t}\n"], ["\n\tmin-height: auto;\n\tpadding: 0;\n\tfont-size: 14px;\n\n\t&,\n\t& ", " > ", " {\n\t\tcolor: ",
    ";\n\t}\n"])), DismissButtonWrapper, DismissButton, function (props) {
    return props.color ||
        (props.info
            ? props.theme.colors.gray.main
            : utils_1.getColor(props, 'color', 'main'));
});
var getIcon = function (props) {
    if (props.prefix === false) {
        return;
    }
    if (props.prefix !== undefined) {
        return props.prefix;
    }
    return props.danger ? (React.createElement(FaExclamationCircle, null)) : props.warning ? (React.createElement(FaExclamationTriangle, null)) : props.success ? (React.createElement(FaCheckCircle, null)) : props.info ? (React.createElement(FaInfoCircle, null)) : ('');
};
var DismissAlert = function (props) { return (React.createElement(DismissButtonWrapper, __assign({}, props),
    React.createElement(DismissButton, { onClick: function () { return props.onDismiss && props.onDismiss(); } },
        React.createElement(FaClose, null)))); };
exports.default = styled_components_1.withTheme(asRendition_1.default(function (props) {
    var emphasized = props.emphasized, plaintext = props.plaintext, prefix = props.prefix, onDismiss = props.onDismiss, restProps = __rest(props, ["emphasized", "plaintext", "prefix", "onDismiss"]);
    var title = plaintext ? getIcon(props) : getTitle(props);
    if (plaintext) {
        return (React.createElement(Plaintext, __assign({}, restProps),
            React.createElement(Grid_1.Flex, null,
                title && React.createElement(AlertTitle, { children: title }),
                React.createElement("div", null, props.children)),
            onDismiss && React.createElement(DismissAlert, { onDismiss: onDismiss })));
    }
    else if (emphasized) {
        return (React.createElement(Filled, __assign({ emphasized: true }, restProps),
            React.createElement("div", null,
                title && React.createElement(AlertTitle, { children: title }),
                props.children),
            onDismiss && React.createElement(DismissAlert, { onDismiss: onDismiss })));
    }
    else {
        return (React.createElement(Outline, __assign({}, restProps),
            React.createElement("div", null,
                title && React.createElement(AlertTitle, { children: title }),
                props.children),
            onDismiss && React.createElement(DismissAlert, { onDismiss: onDismiss })));
    }
}));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
