"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_router_dom_v5_compat_1 = require("react-router-dom-v5-compat");
const react_core_1 = require("@patternfly/react-core");
const filter_icon_1 = require("@patternfly/react-icons/dist/js/icons/filter-icon");
const sync_icon_1 = require("@patternfly/react-icons/dist/js/icons/sync-icon");
const common_1 = require("../../../common");
const common_2 = require("../../../common");
const slice_1 = require("../../store/slices/clusters/slice");
const omit_js_1 = tslib_1.__importDefault(require("lodash-es/omit.js"));
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const store_1 = require("../../store");
const selectors_1 = require("../../store/slices/clusters/selectors");
const CustomToolbarFilter_1 = require("../../../common/components/ui/CustomToolbarFilter");
const clusterStatusFilterLabels = (t) => Array.from(new Set(Object.values((0, omit_js_1.default)((0, common_1.clusterStatusLabels)(t), 'adding-hosts'))));
const ClustersListToolbar = ({ searchString, setSearchString, filters, setFilters, }) => {
    const [isStatusExpanded, setStatusExpanded] = react_1.default.useState(false);
    const navigate = (0, react_router_dom_v5_compat_1.useNavigate)();
    const clustersUIState = (0, store_1.useSelectorDay1)(selectors_1.selectClustersUIState);
    const dispatch = (0, store_1.useDispatchDay1)();
    const fetchClusters = react_1.default.useCallback(() => void dispatch((0, slice_1.fetchClustersAsync)()), [dispatch]);
    const onClearAllFilters = () => {
        setFilters({
            status: [],
        });
    };
    const onSearchNameChanged = setSearchString;
    const onSelect = (type, isChecked, value) => {
        setFilters(Object.assign(Object.assign({}, filters), { [type]: isChecked
                ? [...filters[type], value]
                : filters[type].filter((v) => v !== value) }));
    };
    const onStatusToggle = () => setStatusExpanded(!isStatusExpanded);
    const onStatusSelect = (val, event) => {
        const value = val;
        onSelect('status', (0, common_1.isSelectEventChecked)(event), value);
    };
    const onDeleteLabel = (type, id) => {
        if (type) {
            setFilters(Object.assign(Object.assign({}, filters), { [type]: filters[type].filter((v) => v !== id) }));
        }
        else {
            onClearAllFilters();
        }
    };
    const onDeleteLabelGroup = (type) => {
        setFilters(Object.assign(Object.assign({}, filters), { [type]: [] }));
    };
    const statusPlaceholder = (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(filter_icon_1.FilterIcon, null),
        " Status"));
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    return (react_1.default.createElement(react_core_1.Toolbar, { id: "clusters-list-toolbar", className: "pf-m-toggle-group-container", collapseListedFiltersBreakpoint: "xl", clearAllFilters: onClearAllFilters },
        react_1.default.createElement(react_core_1.ToolbarContent, null,
            react_1.default.createElement(react_core_1.ToolbarItem, null,
                react_1.default.createElement(react_core_1.InputGroup, null,
                    react_1.default.createElement(react_core_1.InputGroupItem, { isFill: true },
                        react_1.default.createElement(react_core_1.TextInput, { name: "search-string", id: "search-string", type: "search", "aria-label": "string to be searched in cluster names or ids", onChange: onSearchNameChanged, value: searchString, placeholder: "Filter by Name, ID or Base domain", title: "Filter by Name, ID or Base domain" })))),
            react_1.default.createElement(CustomToolbarFilter_1.CustomToolbarFilter, { labels: filters.status, deleteLabel: onDeleteLabel, deleteLabelGroup: onDeleteLabelGroup, categoryName: "status" },
                react_1.default.createElement(react_core_1.Dropdown, { isOpen: isStatusExpanded, onSelect: (event, value) => onStatusSelect(value, event), onOpenChange: onStatusToggle, toggle: (toggleRef) => (react_1.default.createElement(react_core_1.MenuToggle, { id: "cluster-list-filter-status", ref: toggleRef, isFullWidth: true, onClick: onStatusToggle, isExpanded: isStatusExpanded }, statusPlaceholder)), shouldFocusToggleOnSelect: true },
                    react_1.default.createElement(react_core_1.DropdownList, null, clusterStatusFilterLabels(t).map((label) => (react_1.default.createElement(react_core_1.DropdownItem, { id: `cluster-list-filter-status-${label}`, hasCheckbox: true, isSelected: filters.status.includes(label), key: label, value: label }, label)))))),
            react_1.default.createElement(common_1.ToolbarButton, { variant: react_core_1.ButtonVariant.primary, onClick: () => navigate(`~new`), id: "button-create-new-cluster", "data-ouia-id": "button-create-new-cluster" }, "Create Cluster"),
            clustersUIState === common_2.ResourceUIState.RELOADING && (react_1.default.createElement(react_core_1.Spinner, { size: "lg", "data-testid": "clusters-list-toolbar-spinner" })),
            react_1.default.createElement(react_core_1.ToolbarGroup, { align: { lg: 'alignEnd' } },
                react_1.default.createElement(common_1.ToolbarButton, { variant: react_core_1.ButtonVariant.plain, onClick: () => fetchClusters(), isDisabled: clustersUIState === common_2.ResourceUIState.RELOADING },
                    react_1.default.createElement(react_core_1.Tooltip, { content: "Refresh" },
                        react_1.default.createElement(sync_icon_1.SyncIcon, { "data-testid": "refresh-clusters-icon" })))))));
};
exports.default = ClustersListToolbar;
//# sourceMappingURL=ClustersListToolbar.js.map