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 {ComponentPassengerPassenger} from '../../generated/graphql';
 9import useProfile from '../../hooks/useProfile';
10import Chip from '@material-ui/core/Chip';
11
12interface Props {
13  passenger?: ComponentPassengerPassenger;
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?.user?.id;
25  const showLocation = isVehicle ? false : passenger.location
26
27  if (passenger) {
28    return (
29      <>
30        <ListItemText
31          primary={<>{passenger.name}{isUser && <Chip className={classes.me} label={t('generic.me')} variant="outlined" />}</>}
32          secondary={showLocation}
33        />
34        {button}
35      </>
36    );
37  } else
38    return (
39      <>
40        <ListItemAvatar>
41          <ListItemIcon color="disabled">
42            <Icon>person</Icon>
43          </ListItemIcon>
44        </ListItemAvatar>
45        <ListItemText
46          primary={t('travel.passengers.empty')}
47          classes={{
48            root: classes.empty,
49          }}
50        />
51      </>
52    );
53};
54
55const useStyles = makeStyles(theme => ({
56  empty: {
57    color: theme.palette.text.secondary,
58  },
59  me: {
60    marginLeft: theme.spacing(2),
61  }
62}));
63
64export default Passenger;