1import List from '@material-ui/core/List';
 2import ListItem from '@material-ui/core/ListItem';
 3import {makeStyles} from '@material-ui/core/styles';
 4import Passenger from './Passenger';
 5import {
 6  ComponentPassengerPassenger,
 7  EditComponentPassengerPassengerInput as PassengerInput,
 8} from '../../generated/graphql';
 9
10interface Props {
11  passengers: ComponentPassengerPassenger[];
12  Button: JSX.Element;
13  disabled?: boolean;
14  isVehicle?: boolean;
15  places?: number;
16  onPress?: (passengerId: string) => void;
17  onClick?: (passengerId: string) => void;
18}
19
20const PassengersList = (props: Props) => {
21  const {passengers, places, Button, onClick, onPress, disabled, isVehicle} =
22    props;
23  const classes = useStyles();
24  let list = passengers;
25
26  if (places) {
27    const emptyList = [...Array(places)];
28    list = Array.isArray(passengers)
29      ? emptyList.map((u, index) => passengers[index])
30      : emptyList;
31  }
32
33  return (
34    <div className={classes.container}>
35      <List disablePadding>
36        {!!list &&
37          list.map((passenger, index) => (
38            <ListItem
39              className={classes.passenger}
40              key={index}
41              disabled={disabled}
42              button={!!onPress}
43              onClick={() => !!onPress && onPress(passenger.id)}
44            >
45              <Passenger
46                key={index}
47                passenger={passenger}
48                isVehicle={isVehicle}
49                button={
50                  <Button onClick={() => onClick && onClick(passenger.id)} />
51                }
52              />
53            </ListItem>
54          ))}
55      </List>
56    </div>
57  );
58};
59
60const useStyles = makeStyles(theme => ({
61  container: {
62    padding: theme.spacing(0, 0, 1, 0),
63  },
64  passenger: {
65    paddingRight: theme.spacing(12),
66  },
67}));
68
69export default PassengersList;