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