"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
require("./TableToolbar.css");
const TableToolbar = (_a) => {
    var { itemIDs, selectedIDs, setSelectedIDs, actions, showPagination, clearAllFilters, children } = _a, paginationProps = tslib_1.__rest(_a, ["itemIDs", "selectedIDs", "setSelectedIDs", "actions", "showPagination", "clearAllFilters", "children"]);
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const [actionsOpen, setActionsOpen] = React.useState(false);
    const [selectOpen, setSelectOpen] = React.useState(false);
    const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
    const onActionsToggle = React.useCallback(() => setActionsOpen(!actionsOpen), [actionsOpen]);
    const onSelectAll = () => setSelectedIDs(itemIDs);
    const onSelectNone = () => setSelectedIDs([]);
    React.useEffect(() => {
        if (!selectedIDs.every((id) => itemIDs.includes(id))) {
            setSelectedIDs(selectedIDs.filter((id) => itemIDs.includes(id)));
        }
    }, [selectedIDs, itemIDs, setSelectedIDs]);
    let isChecked = false;
    if (selectedIDs.length) {
        isChecked =
            selectedIDs.length === itemIDs.length && itemIDs.every((id) => selectedIDs.includes(id))
                ? true
                : null;
    }
    const isActionsDisabled = isChecked === false;
    const actionsDropdown = (React.createElement(react_core_1.Dropdown, { onSelect: onActionsToggle, onOpenChange: onActionsToggle, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: onActionsToggle, isExpanded: actionsOpen, isDisabled: isActionsDisabled, "data-testid": "actions-dropdown-toggle" }, t('ai:Actions'))), isOpen: actionsOpen }, actions));
    const SelectDropdown = (React.createElement(react_core_1.Dropdown, { onSelect: onSelectToggle, onOpenChange: onSelectToggle, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: onSelectToggle, isExpanded: selectOpen, "data-testid": "select-dropdown-toggle" },
            React.createElement(react_core_1.MenuToggleCheckbox, { id: "select-checkbox", key: "select-checkbox", "aria-label": "Select all", onChange: (checked, _event) => (checked ? onSelectAll() : onSelectNone()), isChecked: isChecked, "data-testid": "select-checkbox" },
                selectedIDs.length,
                " ",
                t('ai:selected')))), isOpen: selectOpen },
        React.createElement(react_core_1.DropdownList, null,
            React.createElement(react_core_1.DropdownItem, { id: 'select-all', key: "select-all", onClick: onSelectAll }, t('ai:Select all')),
            React.createElement(react_core_1.DropdownItem, { id: 'select-none', key: "select-none", onClick: onSelectNone }, t('ai:Select none')))));
    return (React.createElement(react_core_1.Split, { hasGutter: true },
        React.createElement(react_core_1.SplitItem, { isFilled: true },
            React.createElement(react_core_1.Toolbar, { className: "table-toolbar", clearAllFilters: clearAllFilters },
                React.createElement(react_core_1.ToolbarContent, { className: "table-toolbar__content" },
                    React.createElement(react_core_1.ToolbarItem, null, SelectDropdown),
                    children,
                    React.createElement(react_core_1.ToolbarItem, null, actionsDropdown)))),
        showPagination && (React.createElement(react_core_1.SplitItem, null,
            React.createElement(react_core_1.Pagination, Object.assign({ itemCount: itemIDs.length }, paginationProps, { isCompact: true }))))));
};
exports.default = TableToolbar;
//# sourceMappingURL=TableToolbar.js.map