1import List from '@material-ui/core/List';
 2import ListItem from '@material-ui/core/ListItem';
 3import IconButton from '@material-ui/core/IconButton';
 4import Icon from '@material-ui/core/Icon';
 5import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 6import {makeStyles} from '@material-ui/core/styles';
 7import Input from './Input';
 8import Passenger from './Passenger';
 9
10const PassengersList = ({
11  passengers,
12  places,
13  addPassenger,
14  icon,
15  onClick,
16  onPress,
17  disabled,
18}) => {
19  const classes = useStyles();
20  let list = passengers;
21
22  if (places) {
23    const emptyList = [...Array(places)];
24    list = Array.isArray(passengers)
25      ? emptyList.map((u, index) => passengers[index])
26      : emptyList;
27  }
28
29  return (
30    <div className={classes.container}>
31      {(places
32        ? passengers
33          ? places - passengers.length > 0
34          : places > 0
35        : true) && (
36        <Input addPassenger={addPassenger} id={!!places ? 'Car' : 'Waiting'} />
37      )}
38      <List disablePadding>
39        {!!list &&
40          list.map((passenger, index) => (
41            <ListItem
42              key={index}
43              disabled={disabled}
44              button={!!onPress}
45              onClick={() => !!onPress && onPress(index)}
46            >
47              <Passenger
48                key={index}
49                passenger={passenger}
50                button={getClearButton(index, onClick, icon)}
51              />
52            </ListItem>
53          ))}
54      </List>
55    </div>
56  );
57};
58
59const getClearButton = (index, onClick, icon) => {
60  return onClick ? (
61    <ListItemSecondaryAction>
62      <IconButton size="small" color="primary" onClick={() => onClick(index)}>
63        <Icon>{icon}</Icon>
64      </IconButton>
65    </ListItemSecondaryAction>
66  ) : (
67    <Icon color="primary">{icon}</Icon>
68  );
69};
70
71const useStyles = makeStyles(theme => ({
72  container: {
73    padding: theme.spacing(1, 0),
74  },
75}));
76
77export default PassengersList;