"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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var findIndex_1 = __importDefault(require("lodash/findIndex"));
var map_1 = __importDefault(require("lodash/map"));
var noop_1 = __importDefault(require("lodash/noop"));
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var button_style_1 = require("@monstrosity/enums/button-style");
var bar_button_1 = require("./bar-button");
var clickable_1 = require("../../primitives/Clickable/clickable");
var ButtonWrapper = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& ", " {\n\t\tbackground: ", ";\n\t}\n"], ["\n\t& ", " {\n\t\tbackground: ",
    ";\n\t}\n"])), bar_button_1.ButtonRoot, function (_a) {
    var isSelected = _a.isSelected, theme = _a.theme;
    return isSelected ? theme.style.colour.disabled.background : 'unset';
});
var Wrapper = themed_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t& ", " {\n\t\tborder-radius: unset;\n\t\tborder-left: unset;\n\t\theight: 100%;\n\t\tmin-width: 3.125rem;\n\t}\n\n\t& ", " ", " {\n\t\theight: 100%;\n\t}\n\n\t& ", ":first-child {\n\t\t", " {\n\t\t\tcursor: ", ";\n\t\t\tpointer-events: ", ";\n\n\t\t\t", " {\n\t\t\t\tborder-radius: 0.35rem 0 0 0.35rem;\n\t\t\t\tborder-left: 1px solid ", ";\n\n\t\t\t\t", " {\n\t\t\t\t\topacity: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t& ", ":last-child {\n\t\t", " {\n\t\t\tcursor: ", ";\n\t\t\tpointer-events: ", ";\n\n\t\t\t", " {\n\t\t\t\tborder-radius: 0 0.35rem 0.35rem 0;\n\n\t\t\t\t", " {\n\t\t\t\t\topacity: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"], ["\n\tdisplay: flex;\n\n\t& ", " {\n\t\tborder-radius: unset;\n\t\tborder-left: unset;\n\t\theight: 100%;\n\t\tmin-width: 3.125rem;\n\t}\n\n\t& ", " ", " {\n\t\theight: 100%;\n\t}\n\n\t& ", ":first-child {\n\t\t", " {\n\t\t\tcursor: ",
    ";\n\t\t\tpointer-events: ",
    ";\n\n\t\t\t", " {\n\t\t\t\tborder-radius: 0.35rem 0 0 0.35rem;\n\t\t\t\tborder-left: 1px solid ", ";\n\n\t\t\t\t", " {\n\t\t\t\t\topacity: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t& ", ":last-child {\n\t\t", " {\n\t\t\tcursor: ",
    ";\n\t\t\tpointer-events: ",
    ";\n\n\t\t\t", " {\n\t\t\t\tborder-radius: 0 0.35rem 0.35rem 0;\n\n\t\t\t\t", " {\n\t\t\t\t\topacity: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), bar_button_1.ButtonRoot, ButtonWrapper, clickable_1.ClickableRoot, ButtonWrapper, clickable_1.ClickableRoot, function (_a) {
    var isOnFirstPage = _a.isOnFirstPage, theme = _a.theme;
    return isOnFirstPage ? theme.cursor.disabled : theme.cursor.pointer;
}, function (_a) {
    var isOnFirstPage = _a.isOnFirstPage;
    return isOnFirstPage ? 'none' : 'unset';
}, bar_button_1.ButtonRoot, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.base;
}, bar_button_1.ButtonLabelWrapper, function (_a) {
    var isOnFirstPage = _a.isOnFirstPage;
    return (isOnFirstPage ? 0.25 : 1);
}, ButtonWrapper, clickable_1.ClickableRoot, function (_a) {
    var isOnLastPage = _a.isOnLastPage, theme = _a.theme;
    return isOnLastPage ? theme.cursor.disabled : theme.cursor.pointer;
}, function (_a) {
    var isOnLastPage = _a.isOnLastPage;
    return isOnLastPage ? 'none' : 'unset';
}, bar_button_1.ButtonRoot, bar_button_1.ButtonLabelWrapper, function (_a) {
    var isOnLastPage = _a.isOnLastPage;
    return (isOnLastPage ? 0.25 : 1);
});
var GroupButton = /** @class */ (function (_super) {
    __extends(GroupButton, _super);
    function GroupButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    GroupButton.prototype.render = function () {
        var _a = this.props, onClick = _a.onClick, pages = _a.pages, showArrows = _a.showArrows, selected = _a.selected, onNext = _a.onNext, onPrevious = _a.onPrevious;
        var currentPage = findIndex_1.default(pages, function (page) { return page.id === selected; });
        var isOnFirstPage = showArrows ? currentPage === 0 : false;
        var isOnLastPage = showArrows ? currentPage === pages.length - 1 : false;
        return (react_1.default.createElement(Wrapper, { isOnFirstPage: isOnFirstPage, isOnLastPage: isOnLastPage },
            showArrows && (react_1.default.createElement(ButtonWrapper, { isSelected: false },
                react_1.default.createElement(bar_button_1.BarButton, { id: "______________previous", label: "\uFE64", onClick: onPrevious || noop_1.default, buttonStyle: button_style_1.ButtonStyle.Secondary }))),
            map_1.default(pages, function (page) {
                var onPageClick = function () { return onClick(page.id); };
                return (react_1.default.createElement(ButtonWrapper, { key: page.id, isSelected: page.id === selected },
                    react_1.default.createElement(bar_button_1.BarButton, { id: page.id, label: page.label, onClick: onPageClick, buttonStyle: button_style_1.ButtonStyle.Secondary })));
            }),
            showArrows && (react_1.default.createElement(ButtonWrapper, { isSelected: false },
                react_1.default.createElement(bar_button_1.BarButton, { id: "______________next", label: "\uFE65", onClick: onNext || noop_1.default, buttonStyle: button_style_1.ButtonStyle.Secondary })))));
    };
    return GroupButton;
}(react_1.default.Component));
exports.GroupButton = GroupButton;
var templateObject_1, templateObject_2;
