//
// Copyright 2024 DXOS.org
//
import React from 'react';
import { Panel } from '../../Panel';
import { Table, Unit } from '../Table';
export const ReplicatorMessagesPanel = ({ database, ...props }) => {
    let recvTotal = 0;
    let sentTotal = 0;
    const replicatorStats = database?.dataStats?.replicator;
    const rows = Object.entries(replicatorStats?.countByMessage ?? {})
        .flatMap(([type, counts]) => {
        sentTotal += counts.sent;
        recvTotal += counts.received;
        const avgSize = replicatorStats?.avgSizeByMessage[type];
        const size = avgSize !== undefined ? ` (${Unit.KB(avgSize)} KB)` : '';
        return [
            ['↑', type + size, counts.sent],
            ['↓', type + size, counts.received],
        ];
    })
        .sort(([d1, t1], [d2, t2]) => {
        const cmp = d1.localeCompare(d2);
        return cmp === 0 ? t1.localeCompare(t2) : cmp;
    });
    return (React.createElement(Panel, { ...props, icon: 'ph--database--regular', title: 'DB messages', info: React.createElement("div", { className: 'flex gap-1 items-center' },
            React.createElement("span", null,
                React.createElement("span", null, recvTotal),
                React.createElement("span", { className: 'text-green-500', title: 'Received' }, "\u2193")),
            React.createElement("span", null,
                React.createElement("span", null, sentTotal),
                React.createElement("span", { className: 'text-orange-500', title: 'Sent' }, "\u2191"))), maxHeight: 0 },
        React.createElement(Table, { rows: rows })));
};
//# sourceMappingURL=ReplicatorMessagesPanel.js.map