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