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