import React from 'react';
import classnames from 'classnames';
import i18n from 'ui-i18n';
import { getContributorColor } from '@reltio/mdm-sdk';
import Typography from '@mui/material/Typography';
import { getActivityLabel } from '../../activity-log';
import { useStyles } from './styles';
export var HistoryRow = function (_a) {
    var _b;
    var change = _a.change, isCurrent = _a.isCurrent, isSelected = _a.isSelected, onClick = _a.onClick;
    var uri = change.uri, type = change.type, matchGroups = change.matchGroups, user = change.user, timestamp = change.timestamp, fakeType = change.fakeType, uris = change.uris;
    var colorUri = fakeType && uris ? uris[0] : uri;
    var color = getContributorColor(colorUri);
    var styles = useStyles({ color: color });
    return (React.createElement("div", { "data-reltio-id": "history-row", className: classnames(styles.historyRow, (_b = {},
            _b[styles.selected] = isSelected,
            _b)), onClick: onClick },
        React.createElement("div", { className: styles.rowHeader },
            React.createElement("div", { className: styles.badge }),
            React.createElement(Typography, { "data-reltio-id": "history-row-header", className: classnames(styles.title, { bold: isCurrent }) }, isCurrent ? i18n.text('Current view') : getActivityLabel(type)),
            !isCurrent && React.createElement(Typography, { className: styles.date }, i18n.date(timestamp, 'L LT'))),
        matchGroups && (React.createElement(Typography, { className: styles.title },
            i18n.text('Match rule:'),
            " ",
            matchGroups.join(', '))),
        React.createElement(Typography, { className: styles.user }, user)));
};
