"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 grommet_1 = require("grommet");
var React = require("react");
var styled_components_1 = require("styled-components");
var asRendition_1 = require("../asRendition");
var utils_1 = require("../utils");
var overrideHoverEffect = styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbox-shadow: none;\n\tbackground: ", ";\n\tborder-color: ", ";\n"], ["\n\tbox-shadow: none;\n\tbackground: ", ";\n\tborder-color: ", ";\n"])), function (props) { return utils_1.getColor(props, 'color', 'light'); }, function (props) { return utils_1.getColor(props, 'color', 'light'); });
var ButtonBase = styled_components_1.default(grommet_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tfont-family: ", ";\n\tfont-weight: ", ";\n\theight: ", ";\n\n\tsvg {\n\t\tcolor: inherit !important;\n\t\tfont-size: 0.875em;\n\t}\n\n\t/* These rules cause consistent styling when the button is rendered as a link */\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n"], ["\n\tfont-family: ", ";\n\tfont-weight: ", ";\n\theight: ", ";\n\n\tsvg {\n\t\tcolor: inherit !important;\n\t\tfont-size: 0.875em;\n\t}\n\n\t/* These rules cause consistent styling when the button is rendered as a link */\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n"])), function (props) { return props.theme.titleFont; }, function (props) { return utils_1.normal(props); }, function (props) { return utils_1.px(props.theme.space[4]); });
var ColouredButton = styled_components_1.default(ButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tcolor: white;\n\t&:hover {\n\t\t", "\n\t}\n"], ["\n\tcolor: white;\n\t&:hover {\n\t\t", "\n\t}\n"])), overrideHoverEffect);
var DefaultColouredButton = styled_components_1.default(ButtonBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: ", ";\n\tborder: white;\n\tbackground: white;\n\t&:hover {\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t}\n"], ["\n\tcolor: ", ";\n\tborder: white;\n\tbackground: white;\n\t&:hover {\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\t}\n"])), function (props) { return props.theme.colors.text.main; }, overrideHoverEffect, function (props) { return props.theme.colors.gray.light; }, function (props) { return props.theme.colors.gray.light; });
var Outline = styled_components_1.default(ButtonBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tcolor: ", ";\n\t&:hover {\n\t\t", "\n\t\tcolor: white;\n\t}\n"], ["\n\tcolor: ", ";\n\t&:hover {\n\t\t", "\n\t\tcolor: white;\n\t}\n"])), function (props) { return props.color || props.theme.colors.text.main; }, overrideHoverEffect);
var DefaultOutlineButton = styled_components_1.default(ButtonBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tcolor: white;\n\tbackground: transparent;\n\tborder-color: white;\n\t&:hover {\n\t\t", "\n\t\tcolor: ", ";\n\t\tbackground: white;\n\t\tborder-color: white;\n\t}\n"], ["\n\tcolor: white;\n\tbackground: transparent;\n\tborder-color: white;\n\t&:hover {\n\t\t", "\n\t\tcolor: ", ";\n\t\tbackground: white;\n\t\tborder-color: white;\n\t}\n"])), overrideHoverEffect, function (props) { return props.theme.colors.text.main; });
var Plain = styled_components_1.default(ButtonBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tcolor: ", ";\n\theight: auto;\n\tfont-weight: ", ";\n\tborder-radius: 0;\n\n\t&:hover:enabled,\n\t&:focus:enabled,\n\t&:active:enabled {\n\t\tcolor: ", ";\n\t}\n"], ["\n\tcolor: ", ";\n\theight: auto;\n\tfont-weight: ", ";\n\tborder-radius: 0;\n\n\t&:hover:enabled,\n\t&:focus:enabled,\n\t&:active:enabled {\n\t\tcolor: ", ";\n\t}\n"])), function (props) { return props.color || props.theme.colors.text.main; }, function (props) { return utils_1.normal(props); }, function (props) { return props.hoverColor || props.theme.colors.text.light; });
var underlineButtonActiveStyles = function (props) { return "\n\tcolor: " + (props.color || props.theme.colors.text.main) + ";\n\tbackground: none;\n\tbox-shadow: 0px -1px 0 0px inset;\n"; };
var Underline = styled_components_1.default(Plain)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t", "\n\tborder-bottom: 1px solid;\n\tbackground: none;\n\n\t&:hover:enabled,\n\t&:focus:enabled,\n\t&:active:enabled {\n\t\t", ";\n\t}\n"], ["\n\t", "\n\tborder-bottom: 1px solid;\n\tbackground: none;\n\n\t&:hover:enabled,\n\t&:focus:enabled,\n\t&:active:enabled {\n\t\t", ";\n\t}\n"])), function (props) { return (props.active ? underlineButtonActiveStyles(props) : ''); }, underlineButtonActiveStyles);
var getStyledButton = function (_a, isPrimary) {
    var outline = _a.outline, underline = _a.underline, plain = _a.plain, active = _a.active, originalProps = __rest(_a, ["outline", "underline", "plain", "active"]);
    if (plain) {
        return function (props) { return (React.createElement(Plain, __assign({}, props, { color: utils_1.getColor(originalProps, 'color', 'main'), hoverColor: utils_1.getColor(originalProps, 'color', 'light') }))); };
    }
    if (underline) {
        return function (props) { return (React.createElement(Underline, __assign({}, props, { plain: true, color: utils_1.getColor(originalProps, 'color', 'main') }))); };
    }
    var hasColorVariant = utils_1.getColor(originalProps, 'color', 'main');
    if (!hasColorVariant) {
        return function (props) {
            return outline && !active ? (React.createElement(DefaultOutlineButton, __assign({}, props))) : (React.createElement(DefaultColouredButton, __assign({}, props)));
        };
    }
    if (active || isPrimary) {
        return function (props) { return (React.createElement(ColouredButton, __assign({}, props, { primary: true }))); };
    }
    if (outline) {
        return function (props) { return (React.createElement(Outline, __assign({}, props, { color: utils_1.getColor(originalProps, 'color', 'main') }))); };
    }
    return ColouredButton;
};
var Base = function (props) {
    var outline = props.outline, underline = props.underline, children = props.children, label = props.label, primary = props.primary, color = props.color, plain = props.plain, active = props.active, restProps = __rest(props, ["outline", "underline", "children", "label", "primary", "color", "plain", "active"]);
    var basePrimary = !!props.bg ||
        (!!utils_1.getColoringType(props) && !outline && !underline && !props.plain);
    var baseColor = props.bg || utils_1.getColor(props, 'bg', 'main');
    if (active) {
        basePrimary = !basePrimary;
        if (basePrimary && !baseColor) {
            baseColor = utils_1.getColor({ tertiary: true, theme: props.theme }, 'bg', 'main');
        }
    }
    var StyledButton = getStyledButton(props, basePrimary);
    return (React.createElement(StyledButton, __assign({ primary: basePrimary, color: baseColor, active: active && (underline || plain) }, restProps, { plain: !!plain || !!underline, label: label || children })));
};
exports.default = asRendition_1.default(Base, [], ['width', 'color', 'bg']);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
