import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { Input } from "../../../Form/Input.js";
import { UiSearchResultsAnnouncement } from "../../UiSearchResultsAnnouncement/UiSearchResultsAnnouncement.js";
import { UiTooltip } from "../../UiTooltip/UiTooltip.js";
import { e } from "../asyncTableBem.js";
import { messages } from "../locales.js";
import { useAsyncTableSearch } from "../useAsyncTableSearch.js";
import { ASYNC_TABLE_FILTER_LABEL_ID, ASYNC_TABLE_SELECTED_COUNT_ID } from "./constants.js";
import { UiAsyncTableBulkActions } from "./UiAsyncTableBulkActions.js";
import { UiAsyncTableCheckbox } from "./UiAsyncTableCheckbox.js";
import { UiAsyncTableFilter } from "./UiAsyncTableFilter.js";
import { getItemKey } from "./utils.js";
export function UiAsyncTableToolbar(props) {
    const { hasContent, renderBulkActions, renderFilters, renderSearchSection } = useAsyncTableToolbar(props);
    const { isMobileView, variant } = props;
    const isSmall = variant === "small";
    return hasContent ? (_jsxs("div", { className: e("toolbar"), children: [
            _jsxs("div", { className: e("toolbar-top", { "mobile-view": isMobileView ?? false }), children: [isSmall ? null : renderBulkActions(), renderFilters(), renderSearchSection()] }), isSmall ? renderBulkActions() : null] })) : null;
}
const useAsyncTableToolbar = ({ filters, isFiltersTooLarge, bulkActions, selectedItemIds, setSelectedItemIds, totalItemsCount, items, variant, isMobileView, width, searchPlaceholder, onSearch, allowSearch, renderToolbarCustomElement, accessibilityConfig, }) => {
    const intl = useIntl();
    const { searchValue, setSearchValue } = useAsyncTableSearch(onSearch);
    const handleCheckboxChange = useCallback(() => {
        setSelectedItemIds(selectedItemIds?.length === 0 ? items.map((item) => getItemKey(item)) : []);
    }, [selectedItemIds, items, setSelectedItemIds]);
    const isCheckboxDisabled = useMemo(() => {
        return items.length === 0;
    }, [items]);
    const isCheckboxChecked = useMemo(() => {
        return !!selectedItemIds?.length;
    }, [selectedItemIds]);
    const isCheckboxIndeterminate = useMemo(() => {
        return !!bulkActions && isCheckboxChecked && selectedItemIds?.length !== items.length;
    }, [bulkActions, isCheckboxChecked, selectedItemIds, items]);
    const checkboxAriaLabel = accessibilityConfig?.checkboxAllAriaLabel;
    const renderBulkActions = useCallback(() => {
        const selectedCount = selectedItemIds?.length ?? 0;
        const selectedMessage = intl.formatMessage(messages["selectedCount"], {
            selectedCount,
            totalCount: totalItemsCount,
        });
        const tooltipMessage = intl.formatMessage(messages["selectAll"]);
        if (bulkActions) {
            return (_jsxs("div", { className: e("toolbar-bulk-actions", { "mobile-view": isMobileView ?? false }), children: [
                    _jsxs("div", { className: e("toolbar-checkbox-section"), children: [
                            _jsx(UiTooltip, { anchor: _jsx(UiAsyncTableCheckbox, { onChange: handleCheckboxChange, checked: isCheckboxChecked, indeterminate: isCheckboxIndeterminate, disabled: isCheckboxDisabled, ariaLabel: checkboxAriaLabel, header: true }), triggerBy: ["hover", "focus"], content: tooltipMessage }), _jsx("div", { id: ASYNC_TABLE_SELECTED_COUNT_ID, className: e("toolbar-selected-count"), children: selectedMessage })
                        ] }), (selectedItemIds?.length ?? 0) > 0 ? (_jsx(UiAsyncTableBulkActions, { bulkActions: bulkActions })) : null] }));
        }
        return null;
    }, [
        bulkActions,
        selectedItemIds,
        isMobileView,
        totalItemsCount,
        intl,
        isCheckboxDisabled,
        handleCheckboxChange,
        isCheckboxChecked,
        isCheckboxIndeterminate,
        checkboxAriaLabel,
    ]);
    const renderFilters = useCallback(() => {
        return filters?.length ? (_jsxs("div", { className: e("toolbar-filters-section"), children: [
                _jsx("div", { className: e("toolbar-label"), id: ASYNC_TABLE_FILTER_LABEL_ID, children: intl.formatMessage(messages["filterLabel"]) }), _jsx("div", { className: e("toolbar-filters"), role: "group", "aria-labelledby": ASYNC_TABLE_FILTER_LABEL_ID, children: filters.map((filter) => (_jsx(UiAsyncTableFilter, { isFiltersTooLarge: isFiltersTooLarge, variant: variant, isMobileView: isMobileView, width: width, ...filter }, filter.label))) })
            ] })) : null;
    }, [filters, intl, isFiltersTooLarge, variant, isMobileView, width]);
    const renderSearchSection = useCallback(() => {
        const placeholder = searchPlaceholder ?? intl.formatMessage(messages["titleSearchPlaceholder"]);
        return (_jsxs("div", { className: e("toolbar-search-section"), children: [onSearch ? (_jsxs(_Fragment, { children: [
                        _jsx(UiSearchResultsAnnouncement, { totalResults: searchValue ? totalItemsCount : undefined }), _jsx("div", { className: e("toolbar-search"), children: _jsx(Input, { isSearch: true, type: "search", isSmall: true, clearOnEsc: true, placeholder: placeholder, accessibilityConfig: {
                                    ariaLabel: accessibilityConfig?.searchAriaLabel ?? placeholder,
                                }, value: searchValue, onChange: (value) => setSearchValue(String(value)) }) })
                    ] })) : null, renderToolbarCustomElement ? renderToolbarCustomElement() : null] }));
    }, [
        onSearch,
        searchPlaceholder,
        renderToolbarCustomElement,
        intl,
        searchValue,
        setSearchValue,
        accessibilityConfig?.searchAriaLabel,
        totalItemsCount,
    ]);
    const hasContent = useMemo(() => {
        return filters?.length || bulkActions || allowSearch;
    }, [filters, bulkActions, allowSearch]);
    return {
        hasContent,
        renderBulkActions,
        renderFilters,
        renderSearchSection,
    };
};
