"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 hoc_1 = require("../hoc");
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 : 20;
    }
    if (props.square || props.w) {
        return 0;
    }
    return props.emphasized ? 50 : 20;
};
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 Button = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tpadding-top: 1px;\n\tpadding-left: ", ";\n\tpadding-right: ", ";\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\tbackground: ", ";\n\tcolor: ", ";\n\theight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t}\n\n\t&:disabled {\n\t\topacity: 0.65;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\tpadding-top: 1px;\n\tpadding-left: ", ";\n\tpadding-right: ", ";\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\tbackground: ", ";\n\tcolor: ", ";\n\theight: ",
    ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tcolor: ", ";\n\t\tbackground-color: ",
    ";\n\t}\n\n\t&:disabled {\n\t\topacity: 0.65;\n\t\tcursor: not-allowed;\n\t}\n"])), function (props) { return utils_1.px(horizontalPadding(props)); }, function (props) { return utils_1.px(horizontalPadding(props)); }, function (props) { return utils_1.bold(props); }, function (props) { return utils_1.px(props.theme.radius); }, function (props) { return utils_1.px(minWidth(props)); }, function (props) { return props.bg || utils_1.getColor(props, 'bg', 'main'); }, function (props) { return props.color || '#fff'; }, 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.darken(props.bg) : utils_1.getColor(props, 'bg', 'dark');
});
var Outline = Button.extend(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tcolor: ", ";\n\tbackground: ", ";\n\tborder: 1px solid;\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground-color: ", ";\n\t}\n"], ["\n\tcolor: ",
    ";\n\tbackground: ", ";\n\tborder: 1px solid;\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground-color: ",
    ";\n\t}\n"])), function (props) {
    return utils_1.getColor(props, 'color', 'main') || props.theme.colors.text.main;
}, function (props) { return props.color || 'none'; }, function (props) {
    return props.bg
        ? utils_1.darken(props.bg)
        : utils_1.getColor(props, 'bg', 'dark') || props.theme.colors.tertiary.dark;
});
var Plaintext = Button.extend(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tpadding-left: 0;\n\tpadding-right: 0;\n\theight: auto;\n\tborder: 0;\n\tborder-radius: 0;\n\tcolor: ", ";\n\tbackground: ", ";\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground: none;\n\t\tcolor: ", ";\n\t}\n"], ["\n\tpadding-left: 0;\n\tpadding-right: 0;\n\theight: auto;\n\tborder: 0;\n\tborder-radius: 0;\n\tcolor: ",
    ";\n\tbackground: ", ";\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground: none;\n\t\tcolor: ",
    ";\n\t}\n"])), function (props) {
    return utils_1.getColor(props, 'color', 'main') || props.theme.colors.text.main;
}, function (props) { return props.color || 'none'; }, function (props) { return utils_1.normal(props); }, function (props) {
    return utils_1.getColor(props, 'color', 'dark') || props.theme.colors.text.main;
});
var Underline = Plaintext.extend(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tpadding-bottom: 2px;\n\tborder-bottom: 1px solid;\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tcolor: ", ";\n\t\tbox-shadow: 0px -1px 0 0px inset;\n\t}\n"], ["\n\tpadding-bottom: 2px;\n\tborder-bottom: 1px solid;\n\tfont-weight: ", ";\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tcolor: ",
    ";\n\t\tbox-shadow: 0px -1px 0 0px inset;\n\t}\n"])), function (props) { return utils_1.bold(props); }, function (props) {
    return utils_1.getColor(props, 'color', 'main') || props.theme.colors.text.main;
});
exports.default = styled_components_1.withTheme(hoc_1.default(function (_a) {
    var outline = _a.outline, underline = _a.underline, plaintext = _a.plaintext, children = _a.children, iconElement = _a.iconElement, props = __rest(_a, ["outline", "underline", "plaintext", "children", "iconElement"]);
    if (plaintext) {
        return (React.createElement(Plaintext, __assign({}, props),
            iconElement && React.createElement(ButtonIcon, null, iconElement),
            children));
    }
    else if (outline) {
        return (React.createElement(Outline, __assign({}, props),
            iconElement && React.createElement(ButtonIcon, null, iconElement),
            children));
    }
    else if (underline) {
        return (React.createElement(Underline, __assign({}, props),
            iconElement && React.createElement(ButtonIcon, null, iconElement),
            children));
    }
    else if (!utils_1.getColoringType(props) && !props.color && !props.bg) {
        return (React.createElement(Outline, __assign({}, props, { tertiary: true }),
            iconElement && React.createElement(ButtonIcon, null, iconElement),
            children));
    }
    else {
        return (React.createElement(Button, __assign({}, props),
            iconElement && React.createElement(ButtonIcon, null, iconElement),
            children));
    }
}));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
