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