import React, { ComponentProps, forwardRef } from 'react';
import { useTheme } from '@mui/material/styles';

import { getBgColor } from '@/mui/helpers';

import AvatarMui from '../../Avatar/Avatar';

type Props = ComponentProps<typeof AvatarMui> & {
  id?: string | number;
  firstName?: string;
  lastName?: string;
};

const UserAvatar = forwardRef<HTMLDivElement, Props>((props, ref) => {
  const { firstName = '', lastName = '', id, sx, ...rest } = props;
  const theme = useTheme();

  const bg = getBgColor(`${id}${firstName}${lastName}`);
  const color = theme.palette.getContrastText(bg);

  const firstLetter = firstName[0];
  const lastLetter = lastName[0];

  return (
    <AvatarMui
      {...rest}
      ref={ref}
      sx={{
        backgroundColor: bg,
        color,
        ...sx,
      }}
    >
      {firstLetter}
      {!!firstLetter && !!lastLetter && (
        <span
          style={{
            // eslint-disable-next-line local-rules/no-inline-styles
            opacity: 0,
            // eslint-disable-next-line local-rules/no-inline-styles
            fontSize: '0.3em',
          }}
        >
          .
        </span>
      )}
      {lastLetter}
    </AvatarMui>
  );
});

UserAvatar.displayName = 'UserAvatar';

export default UserAvatar;
