import React from 'react';
import classnames from 'classnames';
import { getEntityImage, getEntityTypeImage, getAbsoluteImageUrl, svg2Url } from '@reltio/mdm-sdk';
import Avatar from '@mui/material/Avatar';
import { DEFAULT_PROFILE_IMAGE } from './no-photo.svg';
import { useMdmAbsoluteImagePath, useMdmMetadata } from '../contexts/MdmModuleContext';
export var EntityAvatar = function (_a) {
    var entity = _a.entity, avatarClassName = _a.avatarClassName, imageClassName = _a.imageClassName;
    var metadata = useMdmMetadata();
    var absoluteImagePath = useMdmAbsoluteImagePath() || '';
    var entityImageSource = getEntityImage(metadata, absoluteImagePath, entity);
    var fallbackImage = getAbsoluteImageUrl(absoluteImagePath, getEntityTypeImage(metadata, entity.type));
    var onImageLoadFail = function (e) {
        e.target.onError = null;
        e.target.src = svg2Url(DEFAULT_PROFILE_IMAGE);
    };
    return (React.createElement(Avatar, { className: classnames(avatarClassName, imageClassName), src: entityImageSource, imgProps: { onError: onImageLoadFail } },
        React.createElement("img", { className: imageClassName, src: fallbackImage, alt: "fallback entity avatar", onError: onImageLoadFail })));
};
