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