import { forwardRef } from 'react';
import { Trans } from 'react-i18next';

import { IconUsersGroup } from '@material-hu/icons/tabler';
import ListItem from '@material-hu/mui/ListItem';
import ListItemAvatar from '@material-hu/mui/ListItemAvatar';
import ListItemButton from '@material-hu/mui/ListItemButton';
import ListItemText from '@material-hu/mui/ListItemText';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';

import { USER_ALL } from 'src/pages/dashboard/Conversations/constants';
import { type User } from 'src/types/user';
import { getFullName, getInitials } from 'src/utils/userUtils';

export type UserItemProps = {
  user: Partial<User>;
  onSelect?: (user: Partial<User>) => void;
  selected?: boolean;
};

const UserItem = forwardRef<
  HTMLLIElement,
  React.PropsWithChildren<UserItemProps>
>(function PeopleItemWithRefComponent(props, ref) {
  const { user, onSelect, selected = false } = props;
  const fullName = getFullName(user);
  const isAll = user.id === USER_ALL.id;

  return (
    <ListItem
      disablePadding
      ref={ref}
    >
      <ListItemButton
        onClick={() => onSelect?.(user)}
        selected={selected}
      >
        <ListItemAvatar>
          <HuAvatar
            size="small"
            {...(isAll
              ? { Icon: IconUsersGroup }
              : {
                  text: getInitials(fullName),
                  src: user.profilePicture ?? '',
                  alt: fullName,
                })}
          />
        </ListItemAvatar>
        <ListItemText
          id={user.id?.toString()}
          primary={fullName}
          primaryTypographyProps={{
            color: theme => theme.palette.new.text.neutral.default,
            noWrap: true,
            variant: 'subtitle2',
          }}
          secondary={
            isAll && (
              <Typography
                variant="body2"
                sx={{
                  color: theme => theme.palette.new.text.neutral.lighter,
                }}
              >
                <Trans
                  i18nKey="chat:messages.mention_all_description"
                  components={{
                    bold: (
                      <Typography
                        component="span"
                        fontWeight="fontWeightSemiBold"
                        sx={{
                          color: theme =>
                            theme.palette.new.text.neutral.lighter,
                        }}
                      />
                    ),
                  }}
                />
              </Typography>
            )
          }
        />
      </ListItemButton>
    </ListItem>
  );
});

export default UserItem;