import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { Fragment, useCallback } from "react";
import { useIntl } from "react-intl";
import { Input } from "../../../Form/Input.js";
import { SeparatorLine } from "../../../SeparatorLine/SeparatorLine.js";
import { e } from "../asyncTableBem.js";
import { messages } from "../locales.js";
import { useAsyncTableSearch } from "../useAsyncTableSearch.js";
/**
 * @internal
 */
export function UiAsyncTableTitle({ title, onSearch, renderIcon, actions }) {
    const { renderIconWithWrapper, renderSearchWithWrapper, renderActionsWithWrapper } = useAsyncTableTitle(renderIcon, onSearch, actions);
    return (_jsxs("div", { className: e("title"), children: [
            _jsx("h1", { className: e("title-text"), children: title }), renderIconWithWrapper(), _jsx("div", { className: e("title-divider"), children: _jsx(SeparatorLine, {}) }), renderSearchWithWrapper(), renderActionsWithWrapper()] }));
}
const useAsyncTableTitle = (renderIcon, onSearch, actions) => {
    const intl = useIntl();
    const { searchValue, setSearchValue } = useAsyncTableSearch(onSearch);
    const renderIconWithWrapper = useCallback(() => {
        return renderIcon ? _jsx("div", { className: e("title-icon"), children: renderIcon() }) : null;
    }, [renderIcon]);
    const renderSearchWithWrapper = useCallback(() => {
        const placeholder = intl.formatMessage(messages["titleSearchPlaceholder"]);
        return onSearch ? (_jsx("div", { className: e("title-search"), children: _jsx(Input, { isSearch: true, type: "search", clearOnEsc: true, placeholder: placeholder, accessibilityConfig: {
                    ariaLabel: placeholder,
                }, value: searchValue, onChange: (value) => setSearchValue(String(value)) }) })) : null;
    }, [onSearch, intl, searchValue, setSearchValue]);
    const renderActionsWithWrapper = useCallback(() => {
        return actions ? (_jsx("div", { className: e("title-actions"), children: actions.map((action, index) => (_jsx(Fragment, { children: action.renderAction() }, index))) }, "actions")) : null;
    }, [actions]);
    return {
        renderIconWithWrapper,
        renderSearchWithWrapper,
        renderActionsWithWrapper,
    };
};
