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