"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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _a, _b, _c;
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_router_dom_1 = require("react-router-dom");
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("./styleConstants");
var buttonSizes;
(function (buttonSizes) {
    buttonSizes["SMALL"] = "SMALL";
    buttonSizes["SMALL_WIDE"] = "SMALL_WIDE";
    buttonSizes["MEDIUM"] = "MEDIUM";
    buttonSizes["MEDIUM_WIDE"] = "MEDIUM_WIDE";
    buttonSizes["LARGE"] = "LARGE";
})(buttonSizes = exports.buttonSizes || (exports.buttonSizes = {}));
var PRIMARY_BUTTON_DEFAULT_THEME = {
    primaryButtonBackground: styleConstants_1.colors.accent.CIVIL_BLUE,
    primaryButtonColor: styleConstants_1.colors.basic.WHITE,
    primaryButtonFontWeight: "normal",
    primaryButtonHoverBackground: styleConstants_1.colors.accent.CIVIL_BLUE_FADED,
    primaryButtonDisabledBackground: styleConstants_1.colors.accent.CIVIL_BLUE_VERY_FADED,
    primaryButtonDisabledColor: styleConstants_1.colors.basic.WHITE,
    primaryButtonTextTransform: "uppercase",
    sansSerifFont: styleConstants_1.fonts.SANS_SERIF,
};
var INVERTED_BUTTON_DEFAULT_THEME = {
    invertedButtonBackground: styleConstants_1.colors.basic.WHITE,
    invertedButtonColor: styleConstants_1.colors.accent.CIVIL_BLUE,
};
var SECONDARY_BUTTON_DEFAULT_THEME = {
    secondaryButtonBackground: styleConstants_1.colors.basic.WHITE,
    secondaryButtonColor: styleConstants_1.colors.accent.CIVIL_GRAY_2,
    secondaryButtonBorder: styleConstants_1.colors.accent.CIVIL_GRAY_3,
    secondaryButtonHoverBackground: styleConstants_1.colors.accent.CIVIL_BLUE,
    secondaryButtonHoverColor: styleConstants_1.colors.basic.WHITE,
};
var DARK_BUTTON_DEFAULT_THEME = {
    darkButtonBackground: styleConstants_1.colors.primary.BLACK,
    darkButtonColor: styleConstants_1.colors.basic.WHITE,
    darkButtonHoverColor: styleConstants_1.colors.basic.WHITE,
    darkButtonHoverBackground: styleConstants_1.colors.accent.CIVIL_GRAY_1,
    darkButtonTextTransform: "none",
};
var BORDERLESS_BUTTON_DEFAULT_THEME = {
    borderlessButtonColor: styleConstants_1.colors.primary.CIVIL_BLUE_1,
    borderlessButtonHoverColor: styleConstants_1.colors.accent.CIVIL_BLUE_FADED,
    borderlessButtonSize: "15px",
};
exports.DEFAULT_BUTTON_THEME = __assign(__assign(__assign(__assign(__assign({}, PRIMARY_BUTTON_DEFAULT_THEME), INVERTED_BUTTON_DEFAULT_THEME), SECONDARY_BUTTON_DEFAULT_THEME), DARK_BUTTON_DEFAULT_THEME), BORDERLESS_BUTTON_DEFAULT_THEME);
var sizesObject = (_a = {},
    _a[buttonSizes.SMALL] = "8px 12px",
    _a[buttonSizes.SMALL_WIDE] = "8px 60px",
    _a[buttonSizes.MEDIUM] = "10px 25px",
    _a[buttonSizes.MEDIUM_WIDE] = "9px 30px",
    _a[buttonSizes.LARGE] = "20px 50px",
    _a);
var spacingObject = (_b = {},
    _b[buttonSizes.SMALL] = "0.5px",
    _b[buttonSizes.SMALL_WIDE] = "0.2px",
    _b[buttonSizes.MEDIUM] = "1px",
    _b[buttonSizes.MEDIUM_WIDE] = "0.2px",
    _b[buttonSizes.LARGE] = "3px",
    _b);
var fontObject = (_c = {},
    _c[buttonSizes.SMALL] = "12px",
    _c[buttonSizes.MEDIUM] = "18px",
    _c[buttonSizes.MEDIUM_WIDE] = "14px",
    _c[buttonSizes.LARGE] = "24px",
    _c);
exports.ButtonComponent = function (props) {
    var activeClass = props.active ? " active" : "";
    var disabledClass = props.disabled ? " disabled" : "";
    var children = props.children, className = props.className, onClick = props.onClick, disabled = props.disabled, to = props.to, href = props.href, target = props.target, type = props.type, inputRef = props.inputRef;
    if (to) {
        return (React.createElement(react_router_dom_1.Link, __assign({}, props, { className: className + activeClass + disabledClass, to: to, ref: inputRef }), children));
    }
    if (href) {
        return (React.createElement("a", __assign({}, props, { className: className + activeClass + disabledClass, href: href, target: target, ref: inputRef }), children));
    }
    return (React.createElement("button", __assign({}, props, { className: className + activeClass + disabledClass, onClick: onClick, type: type || "button", disabled: disabled, ref: inputRef }), children));
};
var BaseButton = styled_components_1.default(exports.ButtonComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n  border-radius: 2px;\n  padding: ", ";\n  font-family: ", ";\n  cursor: pointer;\n  border: none;\n  letter-spacing: ", ";\n  font-size: ", ";\n  transition: background-color 500ms;\n  outline: none;\n  display: inline-block;\n  ", ";\n  ", ";\n"], ["\n  text-decoration: none;\n  border-radius: 2px;\n  padding: ", ";\n  font-family: ", ";\n  cursor: pointer;\n  border: none;\n  letter-spacing: ", ";\n  font-size: ", ";\n  transition: background-color 500ms;\n  outline: none;\n  display: inline-block;\n  ", ";\n  ", ";\n"])), function (props) { return sizesObject[props.size || buttonSizes.LARGE]; }, function (props) { return props.theme.sansSerifFont; }, function (props) { return spacingObject[props.size || buttonSizes.LARGE]; }, function (props) { return fontObject[props.size || buttonSizes.LARGE]; }, function (props) { return (props.width ? "width: " + props.width + "px;" : ""); }, function (props) { return (props.fullWidth ? "width: 100%;" : ""); });
exports.Button = styled_components_1.default(BaseButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) { return props.theme.primaryButtonBackground; }, function (props) { return props.theme.primaryButtonColor; }, function (props) { return props.theme.primaryButtonFontWeight; }, function (props) { return (props.textTransform ? props.textTransform : props.theme.primaryButtonTextTransform); }, function (props) { return props.theme.primaryButtonHoverBackground; }, function (props) { return props.theme.primaryButtonColor; }, function (props) { return props.theme.primaryButtonDisabledBackground; }, function (props) { return props.theme.primaryButtonDisabledColor; });
exports.Button.defaultProps = {
    theme: PRIMARY_BUTTON_DEFAULT_THEME,
};
exports.InvertedButton = styled_components_1.default(BaseButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-transform: uppercase;\n  background-color: ", ";\n  color: ", ";\n  border: 2px solid ", ";\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  background-color: ", ";\n  color: ", ";\n  border: 2px solid ", ";\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) { return props.theme.invertedButtonBackground; }, function (props) { return props.theme.invertedButtonColor; }, function (props) { return props.theme.invertedButtonColor; }, function (props) { return props.theme.invertedButtonColor; }, function (props) { return props.theme.invertedButtonBackground; });
exports.InvertedButton.defaultProps = {
    theme: INVERTED_BUTTON_DEFAULT_THEME,
};
exports.SecondaryButton = styled_components_1.default(BaseButton)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:focus,\n  &:hover,\n  &.active {\n    background-color: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:focus,\n  &:hover,\n  &.active {\n    background-color: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n  }\n"])), function (props) { return props.theme.secondaryButtonBackground; }, function (props) { return props.theme.secondaryButtonColor; }, function (props) { return props.theme.secondaryButtonBorder; }, function (props) { return props.theme.secondaryButtonHoverBackground; }, function (props) { return props.theme.secondaryButtonHoverBackground; }, function (props) { return props.theme.secondaryButtonHoverColor; });
exports.SecondaryButton.defaultProps = {
    theme: SECONDARY_BUTTON_DEFAULT_THEME,
};
exports.DarkButton = styled_components_1.default(BaseButton)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  text-transform: ", ";\n  &:focus,\n  &:hover,\n  &.active {\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  text-transform: ", ";\n  &:focus,\n  &:hover,\n  &.active {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.darkButtonBackground; }, function (props) { return props.theme.darkButtonColor; }, function (props) { return props.theme.darkButtonTextTransform; }, function (props) { return props.theme.darkButtonHoverColor; }, function (props) { return props.theme.darkButtonHoverBackground; });
exports.DarkButton.defaultProps = {
    theme: DARK_BUTTON_DEFAULT_THEME,
};
exports.CancelButton = styled_components_1.default(exports.SecondaryButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  border: none;\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: ", ";\n    border: none;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  border: none;\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: ", ";\n    border: none;\n    color: ", ";\n  }\n"])), styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_RED_VERY_FADED, styleConstants_1.colors.accent.CIVIL_RED);
exports.BorderlessButton = styled_components_1.default(exports.Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none;\n  font-family: ", ";\n  color: ", ";\n  font-weight: 700;\n  margin-left: 8px;\n  letter-spacing: 0.7px;\n  padding: ", ";\n  font-size: ", ";\n  background-color: transparent;\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: transparent;\n    color: ", ";\n  }\n"], ["\n  border: none;\n  font-family: ", ";\n  color: ", ";\n  font-weight: 700;\n  margin-left: 8px;\n  letter-spacing: 0.7px;\n  padding: ", ";\n  font-size: ", ";\n  background-color: transparent;\n  &:focus,\n  &:active,\n  &:hover {\n    background-color: transparent;\n    color: ", ";\n  }\n"])), function (props) { return props.theme.sansSerifFont; }, function (props) { return props.theme.borderlessButtonColor; }, sizesObject[buttonSizes.SMALL], function (props) { return props.theme.borderlessButtonSize; }, function (props) { return props.theme.borderlessButtonHoverColor; });
exports.BorderlessButton.defaultProps = {
    theme: BORDERLESS_BUTTON_DEFAULT_THEME,
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
//# sourceMappingURL=Button.js.map