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: ({
13    onClick,
14    disabled,
15  }: {
16    onClick: () => void;
17    disabled?: boolean;
18  }) => JSX.Element;
19  disabled?: boolean;
20  isVehicle?: boolean;
21  isTravel?: boolean;
22  places?: number;
23  onPress?: (passengerId: string) => void;
24  onClick?: (passengerId: string) => void;
25}
26
27const PassengersList = (props: Props) => {
28  const {passengers, places, Button, onClick, onPress, disabled, isVehicle} =
29    props;
30  const classes = useStyles();
31  let list = passengers;
32
33  if (places) {
34    const emptyList = [...Array(places)];
35    list = Array.isArray(passengers)
36      ? emptyList.map((u, index) => passengers[index])
37      : emptyList;
38  }
39
40  return (
41    <div className={classes.container}>
42      <List disablePadding>
43        {!!list &&
44          list.map((passenger, index) => (
45            <ListItem
46              className={classes.passenger}
47              key={index}
48              disabled={disabled}
49              button={!!onPress}
50              onClick={() => !!onPress && onPress(passenger.id)}
51            >
52              <Passenger
53                key={index}
54                passenger={passenger}
55                isVehicle={isVehicle}
56                button={
57                  <Button
58                    onClick={() => onClick && onClick(passenger.id)}
59                    disabled={disabled}
60                  />
61                }
62              />
63            </ListItem>
64          ))}
65      </List>
66    </div>
67  );
68};
69
70const useStyles = makeStyles(theme => ({
71  container: {
72    padding: theme.spacing(0, 0, 1, 0),
73  },
74  passenger: {
75    paddingRight: theme.spacing(12),
76  },
77}));
78
79export default PassengersList;