"use strict";
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;
};
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 };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const react_jss_1 = __importDefault(require("react-jss"));
const types_1 = require("../../types");
const classNames = require("classnames");
const Icon_1 = require("../Icon");
var Size;
(function (Size) {
    Size[Size["BIG"] = 0] = "BIG";
    Size[Size["NORMAL"] = 1] = "NORMAL";
    Size[Size["SMALL"] = 2] = "SMALL";
    Size[Size["XSMALL"] = 3] = "XSMALL";
    Size[Size["XXSMALL"] = 4] = "XXSMALL";
    Size[Size["XXXSMALL"] = 5] = "XXXSMALL";
})(Size = exports.Size || (exports.Size = {}));
var Style;
(function (Style) {
    Style[Style["PRIMARY"] = 0] = "PRIMARY";
    Style[Style["SECONDARY"] = 1] = "SECONDARY";
    Style[Style["TERTIARY"] = 2] = "TERTIARY";
    Style[Style["LINK"] = 3] = "LINK";
    Style[Style["DANGER"] = 4] = "DANGER";
})(Style = exports.Style || (exports.Style = {}));
const styles = (theme) => types_1.createStyles({
    button: {
        position: 'relative',
        appearance: 'none',
        border: 'none',
        padding: ((props) => isRenderingIcon(props) ? 0 : '0 20px'),
        borderRadius: '34px',
        height: '34px',
        lineHeight: '34px',
        fontSize: '11px',
        fontWeight: 700,
        transition: 'all 250ms ease-out',
        '&:disabled': {
            cursor: 'default',
            opacity: 0.4,
        },
        '&:focus': {
            outline: 'none',
        },
    },
    buttonXSmall: {
        height: '24px',
        lineHeight: '24px',
    },
    buttonXXSmall: {
        height: '20px',
        lineHeight: '20px',
        padding: '0 10px',
    },
    buttonXXXSmall: {
        height: '16px',
        lineHeight: '16px',
        padding: '0 10px',
    },
    buttonSmall: {
        height: '30px',
        lineHeight: '30px',
    },
    buttonBig: {
        fontSize: '13px',
        height: '42px',
        lineHeight: '42px',
    },
    buttonPrimary: {
        backgroundColor: '#292929',
        color: '#fff',
        '&:hover:enabled, &:active:enabled': {
            color: 'rgba(255, 255, 255, 0.8)',
        },
    },
    buttonSecondary: {
        color: 'rgba(255, 255, 255, 0.6)',
        backgroundColor: 'rgba(255,255,255, 0.1)',
        '&:hover:enabled, &:active:enabled': {
            backgroundColor: 'rgba(255,255,255, 0.2)',
        },
    },
    buttonTertiary: {
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
        color: 'rgba(0, 0, 0, 0.4)',
        '&:hover:enabled, &:active:enabled': {
            backgroundColor: 'rgba(0, 0, 0, 0.2)',
        },
    },
    buttonLink: {
        fontWeight: 'bold',
        color: 'rgba(255, 255, 255, 0.6)',
        backgroundColor: 'transparent',
        textDecoration: 'underline',
        '&:hover:enabled, &:active:enabled': {
            color: 'rgba(255, 255, 255, 0.8)',
        },
    },
    buttonDanger: {
        backgroundColor: theme.colors.flatRed.middle,
        color: 'white',
        '&:hover:enabled, &:active:enabled': {
            backgroundColor: theme.colors.flatRed.dark,
        },
    },
    content: {
        opacity: (({ isLoading }) => isLoading ? 0 : 1),
        transition: '300ms',
    },
    '@keyframes spin': {
        '100%': { transform: 'rotate(360deg)' },
    },
    loading: Object.assign({}, theme.mixins.flexbox.containerCenter, { position: 'absolute', left: 0 }, theme.mixins.size('100%'), { opacity: (({ isLoading }) => isLoading ? 1 : 0), transition: 'opacity 300ms', '& svg': {
            animation: `spin 1.5s cubic-bezier(0.82, 0.26, 0.25, 0.68) infinite`,
            animationPlayState: (({ isLoading }) => isLoading ? 'running' : 'paused'),
        } }),
});
class ButtonImpl extends React.Component {
    render() {
        const _a = this.props, { classes, className: upperClassName, btnSize, btnStyle, sheet: _ } = _a, buttonProps = __rest(_a, ["classes", "className", "btnSize", "btnStyle", "sheet"]);
        const sizeClassNames = {
            [Size.XXXSMALL]: classes.buttonXXXSmall,
            [Size.XXSMALL]: classes.buttonXXSmall,
            [Size.XSMALL]: classes.buttonXSmall,
            [Size.SMALL]: classes.buttonSmall,
            [Size.NORMAL]: '',
            [Size.BIG]: classes.buttonBig,
        };
        const styleClassNames = {
            [Style.PRIMARY]: classes.buttonPrimary,
            [Style.SECONDARY]: classes.buttonSecondary,
            [Style.TERTIARY]: classes.buttonTertiary,
            [Style.LINK]: classes.buttonLink,
            [Style.DANGER]: classes.buttonDanger,
        };
        const className = classNames(classes.button, sizeClassNames[btnSize], styleClassNames[btnStyle], upperClassName);
        return (React.createElement("button", Object.assign({ className: className }, buttonProps),
            React.createElement("div", { className: classes.loading },
                React.createElement(Icon_1.Icon, { symbolId: Icon_1.IconSymbol.LOADING, size: 15, color: '#fff' })),
            React.createElement("span", { className: classes.content }, this.props.children)));
    }
}
ButtonImpl.defaultProps = {
    btnSize: Size.NORMAL,
    btnStyle: Style.PRIMARY,
};
exports.ButtonImpl = ButtonImpl;
const isRenderingIcon = (props) => {
    const childrenIsObject = typeof props.children === 'object';
    if (!childrenIsObject)
        return false;
    const childrenHasProps = typeof props.children.props !== ('undefined' || 'null');
    if (!childrenHasProps)
        return false;
    return Object.keys(props.children.props)
        .some((prop) => prop === 'symbolId');
};
exports.Button = react_jss_1.default(styles)(ButtonImpl);
//# sourceMappingURL=index.js.map