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  const theme = useTheme();
43
44  return (
45    <Root sx={{padding: theme.spacing(0, 0, 1, 0)}}>
46      <List disablePadding>
47        {!!passengers &&
48          passengers.map((passenger, index) => (
49            <ListItem
50              sx={{paddingRight: theme.spacing(12)}}
51              key={index}
52              button={!!onPress}
53              onClick={() => !!onPress && onPress(passenger.id)}
54            >
55              <Passenger
56                key={index}
57                passenger={{
58                  id: passenger.id,
59                  attributes: {...passenger.attributes, travel: {data: travel}},
60                }}
61                isTravel={!!travel}
62                button={
63                  <Button
64                    passenger={passenger}
65                    onClick={() => onClick && onClick(passenger.id)}
66                  />
67                }
68              />
69            </ListItem>
70          ))}
71      </List>
72    </Root>
73  );
74};
75
76export default PassengersList;