import React from 'react';
import i18n from 'ui-i18n';
import { getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
import { EntityAvatar } from '../../../EntityAvatar';
import { EntityUriLink } from '../../../EntityUriLink';
import { PivotingUriLink } from '../../../PivotingUriLink';
import { MAX_ENTITIES_PIVOTING_TOOLTIP } from '../../../hooks/usePivotingDataLoader';
import { useStyles } from './styles';
export var PivotingTooltipContent = function (_a) {
    var attributeType = _a.attributeType, label = _a.label, entities = _a.entities, generatedValue = _a.generatedValue, onSeeAllClick = _a.onSeeAllClick, total = _a.total;
    var styles = useStyles();
    var shouldShowSeeAllButton = total > MAX_ENTITIES_PIVOTING_TOOLTIP;
    var hasEntityTypeLabel = Boolean(label);
    return (React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.header },
            React.createElement("div", { className: styles.title }, i18n.text('Pivot profiles')),
            React.createElement("div", { className: styles.divider }),
            React.createElement("div", { className: styles.headerCount }, i18n.number(total, '0,0') + ' ' + (total === 1 ? i18n.text('item') : i18n.text('items')))),
        hasEntityTypeLabel && React.createElement("div", { className: styles.entityTypeLabel }, label),
        React.createElement("div", { className: styles.body }, entities.map(function (visibleEntity) { return (React.createElement("div", { key: visibleEntity.uri, className: styles.entityContainer },
            React.createElement(EntityAvatar, { entity: visibleEntity, avatarClassName: styles.profileIcon }),
            React.createElement(EntityUriLink, { className: styles.entityLabel, value: getEntityUriForLink(visibleEntity) }, getLabel(visibleEntity.label)))); })),
        shouldShowSeeAllButton && (React.createElement("div", { className: styles.footer },
            React.createElement(PivotingUriLink, { value: generatedValue, attributeType: attributeType, className: styles.seeAllButton, onClick: onSeeAllClick }, i18n.text('See all'))))));
};
