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 findIndex from 'lodash/findIndex';
import map from 'lodash/map';
import noop from 'lodash/noop';
import styled from '@monstrosity/utilities/themed-components';
import { ButtonStyle } from '@monstrosity/enums/button-style';
import { BarButton, ButtonRoot, ButtonLabelWrapper } from './bar-button';
import { ClickableRoot } from '../../primitives/Clickable/clickable';
var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& ", " {\n\t\tbackground: ", ";\n\t}\n"], ["\n\t& ", " {\n\t\tbackground: ",
    ";\n\t}\n"])), ButtonRoot, function (_a) {
    var isSelected = _a.isSelected, theme = _a.theme;
    return isSelected ? theme.style.colour.disabled.background : 'unset';
});
var Wrapper = styled.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"])), ButtonRoot, ButtonWrapper, ClickableRoot, ButtonWrapper, 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';
}, ButtonRoot, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.base;
}, ButtonLabelWrapper, function (_a) {
    var isOnFirstPage = _a.isOnFirstPage;
    return (isOnFirstPage ? 0.25 : 1);
}, ButtonWrapper, 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';
}, ButtonRoot, 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(pages, function (page) { return page.id === selected; });
        var isOnFirstPage = showArrows ? currentPage === 0 : false;
        var isOnLastPage = showArrows ? currentPage === pages.length - 1 : false;
        return (React.createElement(Wrapper, { isOnFirstPage: isOnFirstPage, isOnLastPage: isOnLastPage },
            showArrows && (React.createElement(ButtonWrapper, { isSelected: false },
                React.createElement(BarButton, { id: "______________previous", label: "\uFE64", onClick: onPrevious || noop, buttonStyle: ButtonStyle.Secondary }))),
            map(pages, function (page) {
                var onPageClick = function () { return onClick(page.id); };
                return (React.createElement(ButtonWrapper, { key: page.id, isSelected: page.id === selected },
                    React.createElement(BarButton, { id: page.id, label: page.label, onClick: onPageClick, buttonStyle: ButtonStyle.Secondary })));
            }),
            showArrows && (React.createElement(ButtonWrapper, { isSelected: false },
                React.createElement(BarButton, { id: "______________next", label: "\uFE65", onClick: onNext || noop, buttonStyle: ButtonStyle.Secondary })))));
    };
    return GroupButton;
}(React.Component));
export { GroupButton };
var templateObject_1, templateObject_2;
