1import {ReactNode} from 'react';
 2import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 3import ListItemIcon from '@material-ui/core/ListItemIcon';
 4import ListItemText from '@material-ui/core/ListItemText';
 5import Icon from '@material-ui/core/Icon';
 6import {makeStyles} from '@material-ui/core/styles';
 7import {useTranslation} from 'react-i18next';
 8import {PassengerEntity} from '../../generated/graphql';
 9import useProfile from '../../hooks/useProfile';
10import Chip from '@material-ui/core/Chip';
11
12interface Props {
13  passenger?: PassengerEntity;
14  button?: ReactNode;
15  isVehicle?: boolean;
16}
17
18const Passenger = (props: Props) => {
19  const {passenger, button, isVehicle} = props;
20  const {t} = useTranslation();
21  const classes = useStyles();
22  const {user} = useProfile();
23
24  const isUser = user && `${user.id}` === passenger?.attributes.user?.data?.id;
25  const showLocation = isVehicle ? false : passenger.attributes.location;
26
27  if (passenger) {
28    return (
29      <>
30        <ListItemText
31          primary={
32            <>
33              {passenger.attributes.name}
34              {isUser && (
35                <Chip
36                  className={classes.me}
37                  label={t('generic.me')}
38                  variant="outlined"
39                />
40              )}
41            </>
42          }
43          secondary={showLocation}
44        />
45        {button}
46      </>
47    );
48  } else
49    return (
50      <>
51        <ListItemAvatar>
52          <ListItemIcon color="disabled">
53            <Icon>person</Icon>
54          </ListItemIcon>
55        </ListItemAvatar>
56        <ListItemText
57          primary={t('travel.passengers.empty')}
58          classes={{
59            root: classes.empty,
60          }}
61        />
62      </>
63    );
64};
65
66const useStyles = makeStyles(theme => ({
67  empty: {
68    color: theme.palette.text.secondary,
69  },
70  me: {
71    marginLeft: theme.spacing(2),
72  },
73}));
74
75export default Passenger;