import Avatar, { type AvatarProps } from '@material-hu/mui/Avatar';
import Stack from '@material-hu/mui/Stack';
import Typography, { type TypographyProps } from '@material-hu/mui/Typography';

import { type User } from 'src/types/user';
import { getFullname } from 'src/utils/userUtils';

type Props = {
  user: Pick<
    User,
    'firstName' | 'lastName' | 'profilePicture' | 'employeeInternalId' | 'email'
  > | null;
  showEmployeeInternalId?: boolean;
  showEmail?: boolean;
  showAvatar?: boolean;
  avatarProps?: AvatarProps;
  nameMaxWidth?: number;
  usernameProps?: TypographyProps;
  onClick?: () => void;
};

/**
 * @deprecated Use `HugoUserInfo` instead
 */

const UserInfo = ({
  user,
  showEmployeeInternalId = true,
  avatarProps,
  usernameProps,
  nameMaxWidth = 300,
  showAvatar = true,
  showEmail = true,
  onClick,
}: Props) => {
  if (!user) return null;
  const fullName = getFullname(user);

  return (
    <Stack
      direction="row"
      alignItems="center"
      onClick={onClick}
      sx={{ cursor: onClick ? 'pointer' : 'default' }}
    >
      {showAvatar && (
        <Avatar
          src={user.profilePicture ?? undefined}
          {...avatarProps}
        />
      )}
      <Stack sx={{ ml: 1, justifyContent: 'center', maxWidth: nameMaxWidth }}>
        <Typography
          noWrap
          title={fullName}
          {...usernameProps}
        >
          {fullName}
        </Typography>
        {showEmployeeInternalId && (
          <Typography
            color="textSecondary"
            variant="body2"
          >
            {user.employeeInternalId}
          </Typography>
        )}
        {showEmail && (
          <Typography
            color="textSecondary"
            variant="body2"
            fontSize="small"
          >
            {user.email || '-'}
          </Typography>
        )}
      </Stack>
    </Stack>
  );
};

export default UserInfo;