import { memo } from 'react';
import clsx from 'clsx';

import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';

import { Avatar } from '../avatar';
import { TableTextGroup } from '../table-text-group';
import { TextWithTooltip } from '../text-with-tooltip';
import type { UserInfoProps } from './types';
import createClasses from './styles';

const UserInfo = (props: UserInfoProps) => {
  const {
    avatarProps,
    name,
    userRole,
    userEmail,
    statusBadgeProps,
    statusIcon,
    statusText
  } = props;
  const classes = createClasses();

  return (
    <Grid container alignItems="center" className={classes.container}>
      <Grid className={classes.userAvatar}>
        <Avatar size="xlarge" {...avatarProps} />
      </Grid>
      <Grid item className={classes.userInfo} data-testid="userInfo">
        <Grid container>
          <Grid item>
            <Typography component="span" className={classes.name}>
              {name}
            </Typography>
          </Grid>
        </Grid>
        <Grid item>
          <Typography component="span" className={classes.userRole}>
            {userRole}
          </Typography>
        </Grid>
        <Grid item>
          <Link className={classes.userEmail} href={`mailto:${userEmail}`}>
            <TextWithTooltip
              numOfLines={1}
              text={userEmail || ''}
              textClassName={classes.userEmail}
            />
          </Link>
        </Grid>
        <Grid item>
          <TableTextGroup
            title={statusText || ''}
            avatarProps={statusIcon}
            badgeProps={statusBadgeProps}
            className={clsx(
              classes.statusContainer,
              statusBadgeProps && classes.statusWithBadge
            )}
          />
        </Grid>
      </Grid>
    </Grid>
  );
};

UserInfo.defaultProps = {
  avatarProps: {
    backgroundColor: '#F2F7FF',
    emailVerified: true,
    src: '',
    initials: ''
  }
};

const m = memo(UserInfo);
export { m as UserInfo };