/**
 * @Move (SQCY)
 * Only used by UsersAutocomplete - move with it to Users/
 */
import { AutocompleteRenderOptionState } from '@material-hu/mui/Autocomplete';
import Avatar from '@material-hu/mui/Avatar';
import Checkbox from '@material-hu/mui/Checkbox';
import ListItem from '@material-hu/mui/ListItem';
import ListItemAvatar from '@material-hu/mui/ListItemAvatar';
import ListItemText from '@material-hu/mui/ListItemText';

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

const AutocompleteUserItem = (multiple: boolean) =>
  function AutocompleteUserItemInner(
    props: any,
    option: User,
    state: AutocompleteRenderOptionState,
  ) {
    const { id, profilePicture, employeeInternalId } = option;

    return (
      <ListItem
        {...props}
        key={id}
      >
        {multiple && <Checkbox checked={state.selected} />}
        <ListItemAvatar>
          <Avatar
            src={profilePicture}
            sx={{
              height: 32,
              width: 32,
            }}
          />
        </ListItemAvatar>
        <ListItemText
          primary={getFullname(option)}
          primaryTypographyProps={{
            color: 'textPrimary',
            noWrap: true,
            variant: 'subtitle2',
          }}
          secondary={employeeInternalId}
        />
      </ListItem>
    );
  };

AutocompleteUserItem.displayName = 'AutocompleteUserItem';

export default AutocompleteUserItem;