import { Box, Divider, SkeletonGroup, SkeletonLine, Table, TableToolbar, Text, TextButton, } from '@wix/design-system';
import React, { Fragment } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { useSelector } from '../../useSelector';
import { Trans } from '../Trans';
const SkeletonSummaryBar = () => (React.createElement(SkeletonGroup, { dataHook: "skeleton-summary-bar" },
    React.createElement(Box, { gap: "SP4", height: "18px", verticalAlign: "middle" },
        React.createElement(SkeletonLine, { width: "112px" }),
        React.createElement(SkeletonLine, { width: "112px" }),
        React.createElement(SkeletonLine, { width: "112px" }))));
const ErrorSummaryBar = ({ onRetry, }) => {
    const { translate: t, ...container } = useWixPatternsContainer();
    useSelector(() => container.initTask.status);
    return (React.createElement(Box, { gap: "3px", dataHook: "error-summary-bar" },
        React.createElement(Text, { weight: "thin", size: "small", skin: "standard", secondary: true, dataHook: "summary-bar-error-text" }, t('cairo.table.summaryBar.loadError')),
        React.createElement(TextButton, { size: "small", weight: "thin", dataHook: "summary-bar-retry-button", onClick: onRetry }, t('cairo.table.summaryBar.loadError.cta'))));
};
const SummaryBarContent = ({ data }) => {
    const { translate: t, ...container } = useWixPatternsContainer();
    useSelector(() => container.initTask.status);
    return (React.createElement(TableToolbar.ItemGroup, { dataHook: "summary-bar-content" }, data.map(({ title, value }, index) => (React.createElement(Fragment, { key: index },
        React.createElement(TableToolbar.Item, null,
            React.createElement(Box, { gap: "3px" },
                React.createElement(Box, null,
                    React.createElement(Text, { weight: "thin", size: "small", skin: "standard", secondary: true, dataHook: "summary-bar-item" },
                        React.createElement(Trans, { i18nKey: "cairo.table.summaryBar.list.item", values: {
                                title,
                                value,
                            }, components: {
                                value: (React.createElement(Text, { weight: "normal", size: "small", skin: "standard" })),
                            } }))))),
        React.createElement(TableToolbar.Item, null, index !== data.length - 1 && (React.createElement(Box, { height: "18px" },
            React.createElement(Divider, { direction: "vertical", dataHook: "summary-bar-divider" })))))))));
};
const _SummaryBar = (props) => {
    const { data, status, onRetry } = props;
    const contentByStatus = {
        loading: React.createElement(SkeletonSummaryBar, null),
        error: React.createElement(ErrorSummaryBar, { onRetry: onRetry }),
        success: React.createElement(SummaryBarContent, { data: data }),
    };
    return (React.createElement(Table.SubToolbar, { dataHook: "summary-bar" }, contentByStatus[status]));
};
export const SummaryBar = observer(_SummaryBar);
//# sourceMappingURL=SummaryBar.js.map