import classnames from 'classnames';
import React from 'react';
import { pick } from 'ramda';
import { getAbsoluteImageUrl, getEntityTypeGraphIcon, getLabel } from '@reltio/mdm-sdk';
import { withTableContext } from '../HOCs/withTableContext';
import { TableVariant } from '../types/basicTable';
import { AvatarWithFallback } from '../AvatarWithFallback';
import { useMdmApiPath, useMdmImagePath, useMdmMetadata } from '../contexts/MdmModuleContext';
import { EntityUriLink } from '../EntityUriLink';
import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
import styles from './styles.module.css';
var ReferenceRenderer = function (_a) {
    var value = _a.value, className = _a.columnData.className, _b = _a.variant, variant = _b === void 0 ? TableVariant.Wide : _b;
    var metadata = useMdmMetadata();
    var apiPath = useMdmApiPath();
    var imagePath = useMdmImagePath();
    var entityTypeGraphIcon = getEntityTypeGraphIcon(metadata, (value === null || value === void 0 ? void 0 : value.refEntity) || {});
    var label = value && getLabel(value.label);
    return (value && (React.createElement(ExpandedValueTooltip, { value: label },
        React.createElement("div", { className: classnames(styles.defaultWrapper, styles.referenceWrapper, styles[variant], className) },
            React.createElement(AvatarWithFallback, { className: styles.referenceIcon, icon: getAbsoluteImageUrl(imagePath || apiPath, entityTypeGraphIcon) }),
            React.createElement(EntityUriLink, { value: value.refEntity.objectURI, className: classnames(styles.referenceContent, styles.entityLink) }, label)))));
};
export default withTableContext(pick(['variant']))(ReferenceRenderer);
