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  isCar?: boolean;
18  places?: number;
19  onPress?: (passengerId: string) => void;
20  onClick?: (passengerId: string) => void;
21  addPassenger: (passenger: PassengerInput) => void;
22}
23
24const PassengersList = (props: Props) => {
25  const {
26    passengers,
27    places,
28    addPassenger,
29    icon,
30    onClick,
31    onPress,
32    disabled,
33    isCar,
34  } = props;
35  const classes = useStyles();
36  let list = passengers;
37
38  if (places) {
39    const emptyList = [...Array(places)];
40    list = Array.isArray(passengers)
41      ? emptyList.map((u, index) => passengers[index])
42      : emptyList;
43  }
44
45  return (
46    <div className={classes.container}>
47      {(places
48        ? passengers
49          ? places - passengers.length > 0
50          : places > 0
51        : true) && (
52        <Input
53          addPassenger={addPassenger}
54          id={!!places ? 'Car' : 'Waiting'}
55          isCar={isCar}
56        />
57      )}
58      <List disablePadding>
59        {!!list &&
60          list.map((passenger, index) => (
61            <ListItem
62              key={index}
63              disabled={disabled}
64              button={!!onPress}
65              onClick={() => !!onPress && onPress(passenger.id)}
66            >
67              <Passenger
68                key={index}
69                passenger={passenger}
70                button={
71                  <ClearButton
72                    icon={icon}
73                    onClick={() => onClick && onClick(passenger.id)}
74                    tabIndex={-1}
75                  />
76                }
77              />
78            </ListItem>
79          ))}
80      </List>
81    </div>
82  );
83};
84
85const useStyles = makeStyles(theme => ({
86  container: {
87    padding: theme.spacing(1, 0),
88  },
89}));
90
91export default PassengersList;