import { observer } from 'mobx-react-lite';
import { Box, CounterBadge, Heading, InfoIcon, Text, TextButton, } from '@wix/design-system';
import React from 'react';
import { useWixPatternsContainer } from '../..';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { withoutDefaults } from '@wix/bex-core';
import { cairoLearnMore } from '@wix/bex-utils/@wix/bi-logger-os-data/v2';
export const ToolbarTitle = observer(function ToolbarTitle({ title, subtitle, showTotal, itemsLimit }) {
    const { translate: t } = useWixPatternsContainer();
    const { collection: { result: { total, status }, }, reportBi, } = useToolbarCollectionContext();
    return (React.createElement(Box, { direction: "vertical", paddingTop: "SP2", paddingBottom: "SP2", width: "100%" },
        React.createElement(Box, { minWidth: 0, verticalAlign: "middle", gap: "SP1" },
            React.createElement(Heading, { dataHook: "toolbar-title", ellipsis: true, size: "medium" }, title),
            showTotal && (total || status.isSuccess) && (React.createElement(CounterBadge, { size: "small", skin: "neutralLight", dataHook: "toolbar-counter" },
                React.createElement(React.Fragment, null, itemsLimit === undefined ? total : `${total} / ${itemsLimit}`)))),
        React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
            React.createElement(Text, { dataHook: "toolbar-subtitle", size: "medium", weight: "thin", secondary: true, ellipsis: true }, subtitle?.text),
            subtitle?.info && React.createElement(InfoIcon, { ...subtitle.info, size: "small" }),
            subtitle?.learnMore && (React.createElement(TextButton, { dataHook: "toolbar-subtitle-learn-more-cta", as: "a", rel: "noopener", target: "_blank", href: subtitle.learnMore.url, onClick: () => {
                    reportBi(withoutDefaults(cairoLearnMore)({
                        origin: 'Toolbar Subtitle',
                    }));
                } }, subtitle.learnMore.label || t('cairo.table.subtitle.learnMore'))))));
});
//# sourceMappingURL=ToolbarTitle.js.map