"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 __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 __());
    };
})();
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 });
var react_1 = __importStar(require("react"));
var styled_components_1 = require("styled-components");
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var icon_1 = require("../Icon/icon");
var clickable_1 = require("../../primitives/Clickable/clickable");
exports.Badge = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: ", ";\n\tposition: absolute;\n\ttop: -4px;\n\tright: -4px;\n\tfont-size: 11px;\n\tfont-weight: ", ";\n\tvertical-align: middle;\n\tpadding: 0 5px;\n\tbox-sizing: border-box;\n\tmin-width: 1.5rem;\n\theight: 1.5rem;\n\tline-height: 1.5rem;\n\ttext-align: center;\n\tborder-radius: 1000px;\n\tcolor: ", ";\n"], ["\n\tbackground-color: ", ";\n\tposition: absolute;\n\ttop: -4px;\n\tright: -4px;\n\tfont-size: 11px;\n\tfont-weight: ", ";\n\tvertical-align: middle;\n\tpadding: 0 5px;\n\tbox-sizing: border-box;\n\tmin-width: 1.5rem;\n\theight: 1.5rem;\n\tline-height: 1.5rem;\n\ttext-align: center;\n\tborder-radius: 1000px;\n\tcolor: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.base;
}, function (_a) {
    var theme = _a.theme;
    return theme.typeography.boldish;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.background;
});
var activeStyle = styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);\n"], ["\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);\n"])));
exports.Container = themed_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tbackground-color: ", ";\n\tpadding: 0.75rem;\n\tborder-radius: 1000px;\n\tposition: relative;\n\tborder: 1px solid rgba(0, 0, 0, 0.2);\n\tcursor: ", ";\n\ttransition-timing-function: ease;\n\ttransition-duration: 300ms;\n\ttransition-property: box-shadow, transform;\n\twidth: ", ";\n\theight: 3.25rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: ", ";\n\n\t", "\n\t", " \n\n    &:hover {\n\t\t", "\n\t}\n\n\t&:active {\n\t\t", "\n\t}\n"], ["\n\tbackground-color: ", ";\n\tpadding: 0.75rem;\n\tborder-radius: 1000px;\n\tposition: relative;\n\tborder: 1px solid rgba(0, 0, 0, 0.2);\n\tcursor: ", ";\n\ttransition-timing-function: ease;\n\ttransition-duration: 300ms;\n\ttransition-property: box-shadow, transform;\n\twidth: ", ";\n\theight: 3.25rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: ", ";\n\n\t", "\n\t",
    " \n\n    &:hover {\n\t\t", "\n\t}\n\n\t&:active {\n\t\t", "\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.background;
}, function (_a) {
    var theme = _a.theme;
    return theme.cursor.pointer;
}, function (_a) {
    var hasLabel = _a.hasLabel;
    return (hasLabel ? 'auto' : '3.25rem');
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.base;
}, function (_a) {
    var size = _a.size;
    return (!size ? '' : "width: " + size + "; height: " + size + ";");
}, function (_a) {
    var fontSize = _a.fontSize;
    return !fontSize ? '' : "font-size: " + fontSize + ";";
}, activeStyle, activeStyle);
exports.Label = themed_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tpadding-left: ", ";\n"], ["\n\tpadding-left: ", ";\n"])), function (_a) {
    var hasIcon = _a.hasIcon;
    return (hasIcon ? '0.75rem' : '0');
});
var focusStyle = styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t", " {\n\t\t", "\n\t}\n"], ["\n\t", " {\n\t\t", "\n\t}\n"])), exports.Container, activeStyle);
var CircleButton = /** @class */ (function (_super) {
    __extends(CircleButton, _super);
    function CircleButton() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onClick = function () {
            var _a = _this.props, id = _a.id, onClick = _a.onClick;
            onClick(id);
        };
        _this.getLabel = function () {
            var _a = _this.props, label = _a.label, icon = _a.icon;
            return label ? react_1.default.createElement(exports.Label, { hasIcon: !!icon }, label) : null;
        };
        _this.getIcon = function () {
            var icon = _this.props.icon;
            if (!icon)
                return;
            return react_1.default.createElement(icon_1.Icon, { icon: icon, size: "1rem" /*color = '#6b00cb'*/ });
        };
        return _this;
    }
    CircleButton.prototype.render = function () {
        var _a = this.props, label = _a.label, size = _a.size, fontSize = _a.fontSize;
        return (react_1.default.createElement(clickable_1.Clickable, { onClick: this.onClick, ariaLabel: label || 'Button', focusStyle: focusStyle, tabbable: true },
            react_1.default.createElement(exports.Container, { hasLabel: !!label, size: size, fontSize: fontSize },
                this.renderCounter(),
                this.getIcon(),
                this.getLabel())));
    };
    CircleButton.prototype.renderCounter = function () {
        var counter = this.props.counter;
        return !counter ? null : react_1.default.createElement(exports.Badge, null, counter);
    };
    return CircleButton;
}(react_1.PureComponent));
exports.CircleButton = CircleButton;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
