/**
 * @Move (SQDP)
 * Only used by the Learning module - move to Learning/
 */
import AvatarGroup from '@material-hu/mui/AvatarGroup';
import Stack from '@material-hu/mui/Stack';
import { styled } from '@material-hu/mui/styles';

import { User } from 'src/types/user';

import { ProfilePicture } from '../ProfilePicture';

export type AvatarGroupStyledProps = {
  count: number;
  max: number;
};

const AvatarGroupStyled = styled(AvatarGroup, {
  shouldForwardProp: prop => prop !== 'count' && prop !== 'max',
})<AvatarGroupStyledProps>(({ count, max }) => ({
  marginLeft: count >= max && '7px',
  '& .MuiAvatar-root:first-child': {
    zIndex: 4,
    color: count > max && '#00000099',
    marginLeft: count >= max && '-9px !important',
  },
  '& .MuiAvatar-root:last-child': {
    marginLeft: '-16px',
  },
  '& .MuiAvatar-root:nth-child(2), .MuiAvatar-root:nth-child(3), .MuiAvatar-root:nth-child(4)':
    {
      marginLeft: '-13px !important',
    },
}));

type Props = {
  users: User[];
  maxShown?: number;
};

function UsersAvatarList({ users, maxShown = Number.MAX_VALUE }: Props) {
  const count = users.length;

  return (
    <Stack alignItems="flex-start">
      <AvatarGroupStyled
        total={count}
        spacing="small"
        sx={{ flexDirection: 'row' }}
        count={count}
        max={maxShown}
      >
        {users.map((user, index) => (
          <ProfilePicture
            key={user.id}
            id={user.id}
            user={user}
            size="small"
            sx={{
              zIndex: index,
              width: '32px',
              height: '32px',
              fontSize: '14px',
            }}
          />
        ))}
      </AvatarGroupStyled>
    </Stack>
  );
}

export default UsersAvatarList;