"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 React = require("react");
var styled_components_1 = require("styled-components");
var asRendition_1 = require("../asRendition");
var utils_1 = require("../utils");
var squareWidth = function (val) { return (val / 9) * 10; };
var minWidth = function (props) {
    if (props.w == null && !props.square) {
        return 'auto';
    }
    if (props.square) {
        return props.emphasized
            ? squareWidth(props.theme.space[5])
            : squareWidth(props.theme.space[4]);
    }
    return props.w;
};
var horizontalPadding = function (props) {
    if (props.w == null && !props.square) {
        return props.emphasized ? 50 : 30;
    }
    if (props.square || props.w) {
        return 0;
    }
    return props.emphasized ? 50 : 30;
};
var ButtonIcon = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tmargin-right: ", ";\n\tfont-size: 0.875em;\n"], ["\n\tmargin-right: ", ";\n\tfont-size: 0.875em;\n"])), function (props) { return utils_1.px(props.theme.space[2]); });
var buttonActiveStyles = function (props) { return "\n\tcolor: " + (props.color || '#fff') + ";\n\tbackground-color: " + (props.bg
    ? utils_1.darken(props.bg)
    : utils_1.darken(utils_1.getColor(props, 'bg', 'main'))) + ";\n"; };
var ButtonBase = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", "\n\tpadding: 0 ", ";\n\tfont-family: inherit;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: ", ";\n\tborder-radius: ", ";\n\tappearance: none;\n\ttext-decoration: none;\n\tborder: 0;\n\tmargin: 0;\n\tmin-width: ", ";\n\tvertical-align: middle;\n\tfont-size: inherit;\n\tline-height: 1.1;\n\ttext-align: center;\n\tcursor: pointer;\n\theight: ", ";\n\ttransition-property: color, background, border-color;\n\ttransition-duration: .1s;\n\ttransition-timing-function: ease-in;\n\toutline: none;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\t&:hover {\n\t\tcolor: ", ";\n\t\tbackground-color: ", "\n\t\t}\n\t}\n\t&:active {\n\t\t", "\n\t}\n\n\t&:disabled {\n\t\topacity: 0.65;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\t",
    "\n\tpadding: 0 ", ";\n\tfont-family: inherit;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: ", ";\n\tborder-radius: ", ";\n\tappearance: none;\n\ttext-decoration: none;\n\tborder: 0;\n\tmargin: 0;\n\tmin-width: ", ";\n\tvertical-align: middle;\n\tfont-size: inherit;\n\tline-height: 1.1;\n\ttext-align: center;\n\tcursor: pointer;\n\theight: ",
    ";\n\ttransition-property: color, background, border-color;\n\ttransition-duration: .1s;\n\ttransition-timing-function: ease-in;\n\toutline: none;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\t&:hover {\n\t\tcolor: ", ";\n\t\tbackground-color: ",
    "\n\t\t}\n\t}\n\t&:active {\n\t\t", "\n\t}\n\n\t&:disabled {\n\t\topacity: 0.65;\n\t\tcursor: not-allowed;\n\t}\n"])), function (props) {
    return props.active
        ? buttonActiveStyles(props)
        : "\n\t\tbackground: " + (props.bg || utils_1.getColor(props, 'bg', 'main')) + ";\n\t\tcolor: " + (props.color || '#fff') + ";\n\t";
}, function (props) { return utils_1.px(horizontalPadding(props)); }, function (props) { return utils_1.normal(props); }, function (props) { return utils_1.px(props.theme.radius); }, function (props) { return utils_1.px(minWidth(props)); }, function (props) {
    return utils_1.px(props.emphasized ? props.theme.space[5] : props.theme.space[4]);
}, function (props) { return props.color || '#fff'; }, function (props) {
    return props.bg
        ? utils_1.lighten(props.bg)
        : utils_1.lighten(utils_1.getColor(props, 'bg', 'main'));
}, buttonActiveStyles);
var Outline = ButtonBase.extend(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t", "\n\tborder: 1px solid ", "\n\t}\n"], ["\n\t",
    "\n\tborder: 1px solid ",
    "\n\t}\n"])), function (props) {
    return props.active
        ? ''
        : "\n\t\tcolor: " + (utils_1.getColor(props, 'color', 'main') || props.theme.colors.text.main) + ";\n\t\tbackground: " + (props.color || 'none') + ";\n\t";
}, function (props) {
    return props.bg ? props.bg : utils_1.getColor(props, 'bg', 'main');
});
var plaintextButtonActiveStyles = function (props) { return "\n\tbackground: none;\n\tcolor: " + (utils_1.getColor(props, 'color', 'dark') || props.theme.colors.text.main) + ";\n"; };
var Plaintext = ButtonBase.extend(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t", " padding-left: 0;\n\tpadding-right: 0;\n\theight: auto;\n\tborder: 0;\n\tborder-radius: 0;\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\t", ";\n\t}\n"], ["\n\t",
    " padding-left: 0;\n\tpadding-right: 0;\n\theight: auto;\n\tborder: 0;\n\tborder-radius: 0;\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\t", ";\n\t}\n"])), function (props) {
    return props.active
        ? plaintextButtonActiveStyles(props)
        : "\n\t\tcolor: " + (utils_1.getColor(props, 'color', 'main') || props.theme.colors.text.main) + ";\n\t\tbackground: none;\n\t";
}, function (props) { return utils_1.normal(props); }, plaintextButtonActiveStyles);
var underlineButtonActiveStyles = function (props) { return "\n\tcolor: " + (utils_1.getColor(props, 'color', 'main') || props.theme.colors.text.main) + ";\n\tbox-shadow: 0px -1px 0 0px inset;\n"; };
var Underline = Plaintext.extend(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t", " padding-bottom: 2px;\n\tborder-bottom: 1px solid;\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\t", ";\n\t}\n"], ["\n\t",
    " padding-bottom: 2px;\n\tborder-bottom: 1px solid;\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\t", ";\n\t}\n"])), function (props) {
    return props.active
        ? underlineButtonActiveStyles(props)
        : "\n\t";
}, function (props) { return utils_1.bold(props); }, underlineButtonActiveStyles);
var defaultButtonActiveStyles = function (props) { return "\n\tcolor: #fff;\n\tbackground-color: " + props.theme.colors.text.main + ";\n"; };
var DefaultButton = ButtonBase.extend(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t", "\n\tborder: 1px solid ", ";\n\t&:hover {\n\t\t", "\n\t\tborder-color: ", ";\n\t}\n\t&:active {\n\t\t", "\n\t}\n"], ["\n\t",
    "\n\tborder: 1px solid ", ";\n\t&:hover {\n\t\t", "\n\t\tborder-color: ", ";\n\t}\n\t&:active {\n\t\t", "\n\t}\n"])), function (props) {
    return props.active
        ? defaultButtonActiveStyles(props)
        : "\n\t\tbackground: #fff;\n\t\tcolor: " + props.theme.colors.text.main + ";\n\t";
}, function (props) { return props.theme.colors.gray.main; }, defaultButtonActiveStyles, function (props) { return props.theme.colors.text.main; }, defaultButtonActiveStyles);
var getStyledButton = function (_a) {
    var outline = _a.outline, underline = _a.underline, plaintext = _a.plaintext, props = __rest(_a, ["outline", "underline", "plaintext"]);
    if (plaintext) {
        return Plaintext;
    }
    if (outline) {
        return Outline;
    }
    if (underline) {
        return Underline;
    }
    if (!utils_1.getColoringType(props) && !props.color && !props.bg) {
        return DefaultButton;
    }
    return ButtonBase;
};
var ButtonFactory = function (tag) {
    var Button = function (props) {
        var outline = props.outline, underline = props.underline, plaintext = props.plaintext, children = props.children, iconElement = props.iconElement, restProps = __rest(props, ["outline", "underline", "plaintext", "children", "iconElement"]);
        var StyledButton = getStyledButton(props);
        if (tag) {
            StyledButton = asRendition_1.withStyledSystem(StyledButton.withComponent(tag));
        }
        return (React.createElement(StyledButton, __assign({}, restProps),
            iconElement && React.createElement(ButtonIcon, null, iconElement),
            children));
    };
    return styled_components_1.withTheme(asRendition_1.default(Button));
};
var Button = ButtonFactory();
Button.a = ButtonFactory('a');
exports.default = Button;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
