import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckIcon } from '../../../../lib/icons/Check.js';
import { ExclamationCircleOutlineIcon } from '../../../../lib/icons/ExclamationCircleOutline.js';
import { OnlineStatusAccountOfflineIcon } from '../../../../lib/icons/OnlineStatusAccountOffline.js';
import { TableFilterBar } from '../../../../lib/ui/Table/TableFilterBar/TableFilterBar.js';
import { TableFilterItem } from '../../../../lib/ui/Table/TableFilterBar/TableFilterItem.js';
export function DeviceHealthBar({ devices, filter, onFilterSelect, }) {
    const erroredAccounts = devices.filter((device) => {
        return (device.errors.filter((error) => 'is_connected_account_error' in error)
            .length > 0);
    });
    const erroredDevices = devices.filter((device) => {
        return (device.errors.filter((error) => 'is_device_error' in error).length > 0);
    });
    const accountIssueCount = erroredAccounts.length;
    const deviceIssueCount = erroredDevices.length;
    const toggle = (target) => () => {
        const newFilter = target === filter ? null : target;
        onFilterSelect(newFilter);
    };
    const deviceLabel = deviceIssueCount > 0
        ? `${deviceIssueCount} ${t.deviceIssues}`
        : `${deviceIssueCount} ${t.deviceIssue}`;
    const accountLabel = accountIssueCount > 0
        ? `${accountIssueCount} ${t.accountIssues}`
        : `${accountIssueCount} ${t.accountIssue}`;
    if (accountIssueCount === 0 && deviceIssueCount === 0) {
        return (_jsx(TableFilterBar, { filterCleared: true, children: _jsxs(TableFilterItem, { children: [_jsx(CheckIcon, {}), t.devicesAndAccountsOk] }) }));
    }
    return (_jsxs(TableFilterBar, { filterCleared: filter == null, onFilterClear: () => {
            onFilterSelect(null);
        }, children: [deviceIssueCount > 0 && (_jsxs(TableFilterItem, { onClick: toggle('device_issues'), selected: filter === 'device_issues', children: [_jsx(ExclamationCircleOutlineIcon, {}), deviceLabel] })), accountIssueCount > 0 && (_jsxs(TableFilterItem, { onClick: toggle('account_issues'), selected: filter === 'account_issues', children: [_jsx(OnlineStatusAccountOfflineIcon, {}), accountLabel] }))] }));
}
const t = {
    devicesAndAccountsOk: 'Devices & accounts OK',
    accountIssue: 'account issue',
    accountIssues: 'account issues',
    deviceIssue: 'device issue',
    deviceIssues: 'device issues',
};
//# sourceMappingURL=DeviceHealthBar.js.map