var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import { ButtonStyle } from '@monstrosity/enums/button-style';
import styled, { css } from '@monstrosity/utilities/themed-components';
import { noSelect } from '@monstrosity/utilities/common-styles/no-select';
import { Clickable } from '../../primitives/Clickable/clickable';
import { Icon } from '../Icon/icon';
import { Dot, Spinner, SpinnerContainer } from '../Spinner/spinner';
import { getColour, getFocusStyle, getHoverStyle } from './styles';
var SlimStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tfont-weight: ", ";\n\tpadding: 0.375rem 1rem;\n"], ["\n\tfont-weight: ", ";\n\tpadding: 0.375rem 1rem;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.weight.regular;
});
var styleTree = {
    'primary': {
        'active': css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tbackground: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: ", ";\n\n\t\t\t&:hover {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t", "\n\t\t\t}\n\t\t"], ["\n\t\t\tbackground: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: ", ";\n\n\t\t\t&:hover {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), function (_a) {
            var theme = _a.theme;
            return theme.style.colour.base;
        }, function (_a) {
            var theme = _a.theme;
            return theme.style.colour.base;
        }, function (_a) {
            var theme = _a.theme;
            return theme.style.colour.background;
        }, function (_a) {
            var theme = _a.theme;
            return theme.typeography.regular;
        }, getHoverStyle(ButtonStyle.Primary), getFocusStyle(ButtonStyle.Primary)),
        'disabled': css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tbackground-color: ", ";\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tbackground-color: ", ";\n\t\t"])), function (_a) {
            var theme = _a.theme;
            return theme.style.colour.disabled.dark;
        }, function (_a) {
            var theme = _a.theme;
            return theme.style.colour.disabled.medium;
        }, function (_a) {
            var theme = _a.theme;
            return theme.style.colour.disabled.light;
        }),
    },
    'secondary': {
        'active': css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tfont-weight: 400;\n\n\t\t\t&:hover {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t", "\n\t\t\t}\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tfont-weight: 400;\n\n\t\t\t&:hover {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), function (_a) {
            var theme = _a.theme;
            return theme.style.colour.base;
        }, function (_a) {
            var theme = _a.theme;
            return theme.style.colour.base;
        }, getHoverStyle(ButtonStyle.Secondary), getFocusStyle(ButtonStyle.Secondary)),
        'disabled': css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t"])), function (_a) {
            var theme = _a.theme;
            return theme.style.colour.disabled.dark;
        }, function (_a) {
            var theme = _a.theme;
            return theme.style.colour.disabled.medium;
        }),
    },
    'text': {
        'active': css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: ", ";\n\n\t\t\t&:hover {\n\t\t\t\t", "\n\t\t\t}\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: ", ";\n\n\t\t\t&:hover {\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), function (_a) {
            var theme = _a.theme;
            return theme.style.colour.active;
        }, function (_a) {
            var theme = _a.theme;
            return theme.typeography.boldish;
        }, getHoverStyle(ButtonStyle.Text)),
        'disabled': css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t"])), function (_a) {
            var theme = _a.theme;
            return theme.style.colour.disabled.dark;
        }),
    },
};
var getStyle = function (buttonStyle, isDisabled) {
    var treeRoot = styleTree[buttonStyle || ButtonStyle.Text];
    return isDisabled ? treeRoot.disabled : treeRoot.active;
};
export var ButtonRoot = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    padding: 0.5rem 1rem;\n    border-radius: 0.35rem;\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n\n    & svg {\n      margin-right: ", ";\n    }\n\n    ", " {\n      position: absolute;\n    }\n\n    ", " {\n      background: ", ";\n    }\n\n    ", "\n\n    ", "\n    pointer-events: ", ";\n\n    ", "\n\n    ", "\n    ", "\n"], ["\n    padding: 0.5rem 1rem;\n    border-radius: 0.35rem;\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n\n    & svg {\n      margin-right: ", ";\n    }\n\n    ", " {\n      position: absolute;\n    }\n\n    ", " {\n      background: ", ";\n    }\n\n    ", "\n\n    ", "\n    pointer-events: ", ";\n\n    ", "\n\n    ",
    "\n    ", "\n"])), function (_a) {
    var hasText = _a.hasText;
    return (hasText ? '0.5rem' : 0);
}, SpinnerContainer, Dot, function (_a) {
    var buttonStyle = _a.buttonStyle, theme = _a.theme;
    return getColour(theme, buttonStyle);
}, function (_a) {
    var buttonStyle = _a.buttonStyle, isDisabled = _a.isDisabled;
    return getStyle(buttonStyle, isDisabled);
}, function (_a) {
    var isLoading = _a.isLoading;
    return (isLoading ? 'color: transparent;' : '');
}, function (_a) {
    var isLoading = _a.isLoading;
    return (isLoading ? 'none' : 'unset');
}, function (_a) {
    var isSlim = _a.isSlim;
    return (!isSlim ? '' : SlimStyle);
}, function (_a) {
    var isDisabled = _a.isDisabled, theme = _a.theme;
    return isDisabled ? theme.cursor.disabled : theme.cursor.pointer;
}, noSelect);
export var ButtonLabelWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
var BarButton = /** @class */ (function (_super) {
    __extends(BarButton, _super);
    function BarButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BarButton.prototype.render = function () {
        var _a = this.props, children = _a.children, onClick = _a.onClick, id = _a.id, label = _a.label, buttonStyle = _a.buttonStyle, isDisabled = _a.isDisabled, icon = _a.icon, isLoading = _a.isLoading, isSlim = _a.isSlim;
        return (React.createElement(Clickable, { onClick: onClick, ariaLabel: label || 'Button', id: id, hoverStyle: getHoverStyle(buttonStyle, isDisabled), focusStyle: getFocusStyle(buttonStyle, true), tabbable: !isDisabled, isDisabled: isDisabled },
            React.createElement(ButtonRoot, { buttonStyle: buttonStyle, isDisabled: isDisabled, hasText: !!label, isLoading: isLoading, isSlim: isSlim },
                icon && React.createElement(Icon, { icon: icon, size: "1rem" }),
                label && React.createElement(ButtonLabelWrapper, null, label),
                isLoading && React.createElement(Spinner, null),
                children)));
    };
    BarButton.defaultProps = {
        'isLoading': false,
        'isSlim': false,
        'isDisabled': false,
    };
    return BarButton;
}(React.Component));
export { BarButton };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
