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