import React from 'react';
import i18n from 'ui-i18n';
import { getActivityType, splitActivityByType } from '../../../utils/activities';
import { ActivitiesFactory } from '../../../ActivitiesFactory';
import { ErrorBoundary } from '../../../../../ErrorBoundary';
import { ActivityTitle } from '../../../ActivityTitle';
import { useStyles } from './styles';
export var ActivityItem = function (_a) {
    var item = _a.item;
    var styles = useStyles();
    var type = getActivityType(item);
    var activities = splitActivityByType(item);
    return (React.createElement("div", { className: styles.activityItem, "data-reltio-id": "activity-log-item" },
        React.createElement("div", { className: styles.activityIcon }, ActivitiesFactory.getIcon(type)),
        React.createElement("div", { className: styles.activityInfo },
            React.createElement("div", { className: styles.userContainer },
                React.createElement("span", { className: styles.activityUser }, item.user),
                React.createElement("span", { className: styles.date }, i18n.date(item.timestamp, 'LT'))),
            activities.map(function (activity, index) {
                var activityType = getActivityType(activity);
                return (React.createElement("div", { key: index, className: styles.activityEvent },
                    React.createElement(ErrorBoundary, { error: React.createElement(React.Fragment, null,
                            React.createElement(ActivityTitle, { type: activityType }),
                            i18n.text("Can't render activity")) }, ActivitiesFactory.getComponent({
                        type: activityType,
                        data: activity
                    }))));
            }))));
};
