1import {ReactNode} from 'react';
 2import ListItemAvatar from '@mui/material/ListItemAvatar';
 3import ListItemIcon from '@mui/material/ListItemIcon';
 4import ListItemText from '@mui/material/ListItemText';
 5import Chip from '@mui/material/Chip';
 6import Box from '@mui/material/Box';
 7import Typography from '@mui/material/Typography';
 8import Icon from '@mui/material/Icon';
 9import {useTheme} from '@mui/material/styles';
10import {useTranslation} from 'react-i18next';
11import useProfile from '../../hooks/useProfile';
12import {PassengerEntity} from '../../generated/graphql';
13
14interface Props {
15  passenger?: PassengerEntity;
16  button?: ReactNode;
17  isTravel?: boolean;
18}
19
20const Passenger = (props: Props) => {
21  const {passenger, button, isTravel} = props;
22  const theme = useTheme();
23  const {t} = useTranslation();
24
25  const {userId} = useProfile();
26
27  const isUser = `${userId}` === passenger?.attributes.user?.data?.id;
28  const showLocation = isTravel ? null : (
29    <Typography
30      sx={{pl: 1, color: 'GrayText'}}
31      component="span"
32      variant="caption"
33    >
34      {passenger.attributes.location}
35    </Typography>
36  );
37
38  if (passenger) {
39    return (
40      <Box sx={{width: 1}}>
41        <ListItemText
42          primary={
43            <Box
44              sx={{
45                width: 1,
46                maxWidth: 1,
47                overflow: 'hidden',
48                textOverflow: 'ellipsis',
49                whiteSpace: 'nowrap',
50              }}
51            >
52              <Icon fontSize="inherit" sx={{verticalAlign: 'middle', mr: 0.5}}>
53                person_outlined
54              </Icon>
55              <Typography
56                component="span"
57                variant="body1"
58                sx={{
59                  overflow: 'hidden',
60                  maxWidth: 'calc(100% - 88px)',
61                  textOverflow: 'ellipsis',
62                  whiteSpace: 'nowrap',
63                }}
64              >
65                {passenger.attributes.name}
66              </Typography>
67              {isUser && (
68                <Chip
69                  sx={{marginLeft: 1}}
70                  label={t('generic.me')}
71                  variant="outlined"
72                />
73              )}
74              {showLocation}
75            </Box>
76          }
77        />
78        {button}
79      </Box>
80    );
81  } else
82    return (
83      <>
84        <ListItemAvatar>
85          <ListItemIcon color="disabled">
86            <Icon>person</Icon>
87          </ListItemIcon>
88        </ListItemAvatar>
89        <ListItemText
90          primary={t('travel.passengers.empty')}
91          sx={{color: theme.palette.text.secondary}}
92        />
93      </>
94    );
95};
96
97export default Passenger;