import * as React from "react";
import { useMediaQuery } from "react-responsive";
import "./SelectedRowsHeader.less";
import { FlexBox, Button } from "../";
import { FlexItem } from "../flex";
import Menu from "../Menu";
var cssClasses = {
    ROW: "Table2Beta--selectedRowsHeader",
    SELECTED_TEXT: "Table2Beta--selectedRowsHeader--selectedText",
    SINGLE_ACTION_TRIGGER: "Table2Beta--singleActionTrigger",
    ACTIONS_FLEXBOX: "Table2Beta--selectedRowsHeader--actionsFlexbox",
    ACTION: "Table2Beta--selectedRowsHeader--action",
    ACTION_ICON: "Table2Beta--actions--icon",
    ACTION_TITLE: "Table2Beta--actions--title",
    ACTION_MENU: "Table2Beta--actions--menu",
    ACTION_MENU_TRIGGER: "Table2Beta--actions--menu--trigger",
    ACTION_MENU_ITEM: "Table2Beta--actions--menu--item",
    ACTION_MENU_ITEM_TITLE: "Table2Beta--actions--menu--item--title",
};
export default function SelectedRowsHeader(_a) {
    var className = _a.className, selectedRows = _a.selectedRows, contentType = _a.contentType, contentTypeNoSelection = _a.contentTypeNoSelection, actions = _a.actions, numDisplayedActions = _a.numDisplayedActions, allSelected = _a.allSelected;
    var rowsAreSelected = selectedRows.size > 0;
    var singleRowSelected = selectedRows.size === 1;
    var compact = useMediaQuery({
        query: "(max-width: 52rem)",
    });
    var displayedActions;
    var moreActions;
    if (actions.length > numDisplayedActions) {
        displayedActions = actions.slice(0, numDisplayedActions);
        moreActions = actions.slice(numDisplayedActions);
    }
    else {
        displayedActions = actions;
    }
    return (React.createElement("div", { className: className },
        React.createElement(FlexBox, { grow: true, className: cssClasses.ROW, column: compact },
            React.createElement(FlexItem, { className: cssClasses.SELECTED_TEXT, grow: true },
                !rowsAreSelected && React.createElement("div", null,
                    "Select ",
                    contentTypeNoSelection || "rows",
                    " to access tools"),
                rowsAreSelected && !allSelected && (React.createElement(React.Fragment, null,
                    React.createElement("div", null,
                        selectedRows.size,
                        " ",
                        singleRowSelected ? contentType.singular || "row" : contentType.plural || "rows",
                        " ",
                        "selected"))),
                rowsAreSelected && allSelected && (React.createElement("div", null, "All " + (contentType.plural || "rows") + " selected (" + selectedRows.size + ")"))),
            React.createElement(FlexItem, { className: cssClasses.ACTIONS_FLEXBOX },
                rowsAreSelected &&
                    displayedActions.map(function (action) { return (React.createElement(Action, { actionInput: {
                            callback: action.callback,
                            title: action.title,
                            icon: action.icon,
                        }, selectedRows: selectedRows, key: action.title.singular })); }),
                rowsAreSelected && moreActions && (React.createElement(Menu, { trigger: React.createElement(Button, { size: "small", className: cssClasses.ACTION_MENU, type: "link" },
                        React.createElement("img", { className: cssClasses.SINGLE_ACTION_TRIGGER, src: require("./ellipsis.svg") })), placement: Menu.Placement.RIGHT }, moreActions.map(function (action) { return (React.createElement(Menu.Item, { className: cssClasses.ACTION_MENU_ITEM, onClick: function (e) { return action.callback(selectedRows); }, key: action.title.singular },
                    React.createElement("div", { className: cssClasses.ACTION_MENU_ITEM_TITLE },
                        action.icon && React.createElement("img", { className: cssClasses.ACTION_ICON, src: action.icon }),
                        React.createElement("div", { className: cssClasses.ACTION_TITLE }, singleRowSelected || !action.title.plural
                            ? action.title.singular
                            : action.title.plural)))); })))))));
}
function Action(_a) {
    var actionInput = _a.actionInput, selectedRows = _a.selectedRows;
    var callback = actionInput.callback, title = actionInput.title, icon = actionInput.icon;
    var singleRowSelected = selectedRows.size === 1;
    return (React.createElement(Button, { className: cssClasses.ACTION, type: "link", value: React.createElement(React.Fragment, null,
            icon && React.createElement("img", { className: cssClasses.ACTION_ICON, src: icon }),
            React.createElement("div", { className: cssClasses.ACTION_TITLE }, singleRowSelected || !title.plural ? title.singular : title.plural)), onClick: function (e) { return callback(selectedRows); }, size: "small" }));
}
