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 { TableFilterBar } from '../../../../lib/ui/Table/TableFilterBar/TableFilterBar.js';
import { TableFilterItem } from '../../../../lib/ui/Table/TableFilterBar/TableFilterItem.js';
export function AccessCodeHealthBar({ accessCodes, filter, onFilterSelect, }) {
    const codesWithIssues = accessCodes.filter(({ errors, warnings }) => errors.length > 0 || warnings.length > 0);
    const issueCount = codesWithIssues.length;
    const toggle = (target) => () => {
        const newFilter = target === filter ? null : target;
        onFilterSelect(newFilter);
    };
    const isPlural = issueCount === 0 || issueCount > 1;
    const label = isPlural
        ? `${issueCount} ${t.accessCodeIssues}`
        : `${issueCount} ${t.accessCodeIssue}`;
    if (issueCount === 0) {
        return (_jsx(TableFilterBar, { filterCleared: true, children: _jsxs(TableFilterItem, { children: [_jsx(CheckIcon, {}), t.accessCodesOk] }) }));
    }
    return (_jsx(TableFilterBar, { filterCleared: filter == null, onFilterClear: () => {
            onFilterSelect(null);
        }, children: _jsxs(TableFilterItem, { onClick: toggle('access_code_issues'), selected: filter === 'access_code_issues', children: [_jsx(ExclamationCircleOutlineIcon, {}), label] }) }));
}
const t = {
    accessCodesOk: 'Access codes OK',
    accessCodeIssue: 'access code issue',
    accessCodeIssues: 'access code issues',
};
//# sourceMappingURL=AccessCodeHealthBar.js.map