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