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