var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import noop from 'lodash/noop';
import styled, { css } from '@monstrosity/utilities/themed-components';
import { Ellipsis } from '@monstrosity/utilities/common-styles/ellipsis';
import { Clickable } from '../../primitives/Clickable/clickable';
var Curve = function (size, onLeft) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcontent: '';\n\tposition: absolute;\n\twidth: ", "rem;\n\theight: ", "rem;\n\tbottom: 0;\n\tz-index: ", ";\n\t", ";\n"], ["\n\tcontent: '';\n\tposition: absolute;\n\twidth: ", "rem;\n\theight: ", "rem;\n\tbottom: 0;\n\tz-index: ", ";\n\t", ";\n"])), size, size, size, (onLeft ? 'left' : 'right') + ": -" + size + "rem"); };
var CurvedTab = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t&::before {\n\t\tcontent: '';\n\t\tbackground: inherit;\n\t\t", "\n\t}\n\n\t&::after {\n\t\tcontent: '';\n\t\tbackground: inherit;\n\t\t", "\n\t}\n"], ["\n\t&::before {\n\t\tcontent: '';\n\t\tbackground: inherit;\n\t\t", "\n\t}\n\n\t&::after {\n\t\tcontent: '';\n\t\tbackground: inherit;\n\t\t", "\n\t}\n"])), Curve(1, true), Curve(1, false));
var InnerSleve = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-radius: 1rem;\n\t\tbackground: ", ";\n\t\tdisplay: ", "; \n\n\t\t", "\n\t}\n\n\t&::after {\n\t\tcontent: '';\n\t\tborder-radius: 1rem;\n\t\tbackground: ", ";\n\t\tdisplay: ", "; \n\n\t\t", "\n\t}\n"], ["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-radius: 1rem;\n\t\tbackground: ", ";\n\t\tdisplay: ", "; \n\n\t\t", "\n\t}\n\n\t&::after {\n\t\tcontent: '';\n\t\tborder-radius: 1rem;\n\t\tbackground: ", ";\n\t\tdisplay: ", "; \n\n\t\t", "\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.backset;
}, function (_a) {
    var isSelected = _a.isSelected;
    return isSelected ? 'unset' : 'none';
}, Curve(2, true), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.backset;
}, function (_a) {
    var isSelected = _a.isSelected;
    return isSelected ? 'unset' : 'none';
}, Curve(2, false));
var HoverTabStyle = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t", "\n\n\t", " {\n\t\t::before,\n\t\t::after {\n\t\t\tdisplay: unset;\n\t\t}\n\t}\n"], ["\n\t", "\n\n\t", " {\n\t\t::before,\n\t\t::after {\n\t\t\tdisplay: unset;\n\t\t}\n\t}\n"])), CurvedTab, InnerSleve);
var ConstraintStyle = function (width) { return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tmax-width: ", ";\n\tdisplay: inline-block;\n\t", "\n"], ["\n\tmax-width: ", ";\n\tdisplay: inline-block;\n\t", "\n"])), width, Ellipsis); };
var Title = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), function (_a) {
    var width = _a.width;
    return width ? ConstraintStyle(width) : '';
});
var Disabled = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tcursor: ", "; \n\tbackground: ", ";\n\tcolor: ", ";\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"], ["\n\tcursor: ", "; \n\tbackground: ", ";\n\tcolor: ", ";\n\n\t&:hover {\n\t\tbackground: ", ";\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.cursor.disabled;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.disabled.medium;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.disabled.dark;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.disabled.medium;
});
var TabButtonRoot = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\tpadding: 0.5rem 1rem;\n\tbackground: ", ";\n\tcolor: ", ";\n\tborder-radius: 0.5rem 0.5rem 0 0;\n\tposition: relative;\n\tmargin: 0 1rem;\n\tz-index: 2;\n\tjustify-content: center;\n    display: flex;\n\ttransition: background-color 0;\n\tcursor: ", ";\n\n\t", "\n\n\t&:hover {\n\t\t", "\n\t\tbackground: ", ";\n\t\ttransition: background-color 300ms;\n\t}\n\n\t", "\n"], ["\n\tpadding: 0.5rem 1rem;\n\tbackground: ", ";\n\tcolor: ", ";\n\tborder-radius: 0.5rem 0.5rem 0 0;\n\tposition: relative;\n\tmargin: 0 1rem;\n\tz-index: 2;\n\tjustify-content: center;\n    display: flex;\n\ttransition: background-color 0;\n\tcursor: ", ";\n\n\t", "\n\n\t&:hover {\n\t\t", "\n\t\tbackground: ", ";\n\t\ttransition: background-color 300ms;\n\t}\n\n\t", "\n"])), function (_a) {
    var theme = _a.theme, isSelected = _a.isSelected;
    return isSelected ? theme.style.colour.background : 'transparent';
}, function (_a) {
    var theme = _a.theme, isSelected = _a.isSelected;
    return isSelected ? theme.style.colour.hover : theme.style.colour.text.body;
}, function (_a) {
    var theme = _a.theme;
    return theme.cursor.pointer;
}, function (_a) {
    var isSelected = _a.isSelected;
    return isSelected ? CurvedTab : '';
}, function (_a) {
    var isDisabled = _a.isDisabled;
    return isDisabled ? '' : HoverTabStyle;
}, function (_a) {
    var theme = _a.theme, isSelected = _a.isSelected;
    return isSelected ? theme.style.colour.background : theme.style.colour.constrast;
}, function (_a) {
    var isDisabled = _a.isDisabled;
    return isDisabled ? Disabled : '';
});
var FocusedTabStyle = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\tcolor: ", ";\n"], ["\n\tcolor: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.active;
});
export var TabButton = React.forwardRef(function (_a, ref) {
    var id = _a.id, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, tabTitle = _a.tabTitle, onTabClick = _a.onTabClick, maxWidth = _a.maxWidth;
    var onClick = isDisabled ? noop : onTabClick;
    var focusStyle = isDisabled ? css(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))) : FocusedTabStyle;
    var isTabbable = isDisabled ? false : true;
    return (React.createElement(TabButtonRoot, { isSelected: isSelected, isDisabled: isDisabled, ref: ref, key: id },
        React.createElement(InnerSleve, { isSelected: isSelected },
            React.createElement(Clickable, { onClick: onClick, ariaLabel: tabTitle, focusStyle: focusStyle, tabbable: isTabbable, isDisabled: isDisabled },
                React.createElement(Title, { width: maxWidth }, tabTitle)))));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
