import Checkbox from '@material-hu/mui/Checkbox';
import ListItem from '@material-hu/mui/ListItem';
import ListItemAvatar from '@material-hu/mui/ListItemAvatar';
import ListItemIcon from '@material-hu/mui/ListItemIcon';
import ListItemText from '@material-hu/mui/ListItemText';

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

import ProfilePicture from 'src/components/user/ProfilePicture';

export type PeopleItemProps = {
  user: User;
  multiple?: boolean;
  onSelect?: (user: User) => void;
  checks?: number[];
};

const PeopleItem = (props: PeopleItemProps) => {
  const { user, multiple = false, onSelect, checks } = props;
  const labelId = `people-list-checkbox-label-${user.id}`;

  return (
    <ListItem
      key={user.id}
      button
      onClick={() => onSelect?.(user)}
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.default,
      }}
    >
      {multiple && (
        <ListItemIcon>
          <Checkbox
            edge="start"
            checked={!!checks?.includes(user.id)}
            tabIndex={-1}
            disableRipple
            inputProps={{
              'aria-labelledby': labelId,
            }}
          />
        </ListItemIcon>
      )}
      <ListItemAvatar>
        <ProfilePicture
          id={user.id}
          user={user}
          size="small"
        />
      </ListItemAvatar>
      <ListItemText
        id={labelId}
        primary={getFullName(user)}
        primaryTypographyProps={{
          color: 'textPrimary',
          noWrap: true,
          variant: 'subtitle2',
        }}
      />
    </ListItem>
  );
};

export default PeopleItem;