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, { PureComponent } from 'react';
import { css } from 'styled-components';
import styled from '@monstrosity/utilities/themed-components';
import { Icon } from '../Icon/icon';
import { Clickable } from '../../primitives/Clickable/clickable';
export var Badge = styled.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 = 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"])));
export var Container = styled.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);
export var Label = styled.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 = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t", " {\n\t\t", "\n\t}\n"], ["\n\t", " {\n\t\t", "\n\t}\n"])), 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.createElement(Label, { hasIcon: !!icon }, label) : null;
        };
        _this.getIcon = function () {
            var icon = _this.props.icon;
            if (!icon)
                return;
            return React.createElement(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.createElement(Clickable, { onClick: this.onClick, ariaLabel: label || 'Button', focusStyle: focusStyle, tabbable: true },
            React.createElement(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.createElement(Badge, null, counter);
    };
    return CircleButton;
}(PureComponent));
export { CircleButton };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
