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                edge="end"
41                size="small"
42                onClick={() => onClick(index)}
43              >
44                <Icon>{icon}</Icon>
45              </IconButton>
46            }
47          />
48        ))}
49    </div>
50  );
51};
52
53const useStyles = makeStyles(theme => ({
54  container: {
55    padding: theme.spacing(1, 0),
56  },
57}));
58
59export default PassengersList;