import React from 'react';
import { Avatar, Text, Tooltip } from '@mantine/core';
import acronym from "./acronym";
import useTwColorByName from "./useTwColorByName";

const getDisplayName = (user) => {
    if (!user) return '?';
    if (user.name) return user.name;
    const first = user.firstName || user.first_name || '';
    const last = user.lastName || user.last_name || '';
    if (first || last) return `${first} ${last}`.trim();
    if (user.email) return user.email.split('@')[0];
    return '?';
};

const UserAvatarSingle = (props) => {
    const {
        user,
        withArrow = false,
        size=40,
        stroke=1.25,
        className='',
    } = props;

    const bgColor = useTwColorByName();
    const displayName = getDisplayName(user);
    const font_color = displayName ? bgColor(displayName)["font-color"] : '';
    const bg_color = user && user.avatar ? 'transparent' : (displayName ? bgColor(displayName)["bg-color"] : '');
    return (
        <Tooltip withinPortal={false} label={displayName} withArrow={withArrow}>
            <Avatar
                className={className}
                color={ font_color }
                bg={ bg_color }
                size={size} mr="-2"
                src={user && user.avatar?user.avatar:null}
                stroke={stroke}
            >
                { user && user.avatar ? '' : <Text style={{ "lineHeight":"14px"}} size="xs">{acronym(displayName)}</Text> }
            </Avatar>
        </Tooltip>
        
    );
}

export default UserAvatarSingle;