var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { Avatar, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React from 'react';
import useDevicePixelRatio from '../../../utilities/useDevicePixelRatio.ts';
import useGravatar from '../../../utilities/useGravatar.ts';
const useStyles = makeStyles((theme) => ({
    root: {},
    default: {},
    toolbar: {
        width: 32,
        height: 32
    },
    large: {
        width: 80,
        height: 80
    }
}), { name: 'UserAvatar' });
/**
 * Inteligent user Avatar element
 *
 * - Loads a Gravatar based on the email if one exists
 * - Falls back to a text avatar while loading and when a Gravatar does not exist
 * - Automatically chooses image size based on size prop and device pixel density (and updates if device pixel density changes)
 */
const UserAvatar = (props) => {
    var _a;
    const classes = useStyles(props);
    const { name, email, size = 'default', className } = props, other = __rest(props, ["name", "email", "size", "className"]);
    const dppx = useDevicePixelRatio();
    const dimension = { toolbar: 32, large: 80 }[size] || 40;
    const avatar = useGravatar(email, { size: dimension * dppx });
    return (React.createElement(Avatar, Object.assign({ alt: name, "aria-label": `${name}'s avatar` }, other, { className: clsx(className, classes[size]), src: avatar }), ((_a = name === null || name === void 0 ? void 0 : name.trim()) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '?'));
};
export default UserAvatar;
//# sourceMappingURL=UserAvatar.js.map