1import {ReactNode} from 'react';
  2import {
  3  ListItemAvatar,
  4  ListItemIcon,
  5  ListItemText,
  6  Chip,
  7  Box,
  8  Typography,
  9  Icon,
 10} from '@mui/material';
 11import {useTranslation} from 'next-i18next';
 12import useProfile from '../../hooks/useProfile';
 13import {PassengerEntity} from '../../generated/graphql';
 14import usePermissions from '../../hooks/usePermissions';
 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 {t} = useTranslation();
 25  const {
 26    userPermissions: {canSeeFullName},
 27  } = usePermissions();
 28
 29  const {userId} = useProfile();
 30  const isUser = `${userId}` === passenger?.attributes.user?.data?.id;
 31
 32  if (passenger) {
 33    return (
 34      <Box
 35        aria-label="user informations"
 36        sx={{
 37          display: 'flex',
 38          alignItems: 'center',
 39          justifyContent: 'space-between',
 40          width: '100%',
 41          padding: 0,
 42        }}
 43      >
 44        <ListItemText
 45          primary={
 46            <Box
 47              sx={{
 48                overflow: 'hidden',
 49                textOverflow: 'ellipsis',
 50                whiteSpace: 'nowrap',
 51              }}
 52            >
 53              <Icon fontSize="inherit" sx={{verticalAlign: 'middle', mr: 0.5}}>
 54                person_outlined
 55              </Icon>
 56              <Typography
 57                component="span"
 58                variant="body1"
 59                sx={{
 60                  overflow: 'hidden',
 61                  textOverflow: 'ellipsis',
 62                  whiteSpace: 'nowrap',
 63                }}
 64              >
 65                {getPassengerName(passenger, canSeeFullName() || isUser)}
 66              </Typography>
 67              {isUser && (
 68                <Chip
 69                  sx={{ml: 1}}
 70                  label={t('generic.me')}
 71                  variant="outlined"
 72                  size="small"
 73                />
 74              )}
 75              {!isTravel && (
 76                <Typography
 77                  sx={{pl: 1, color: 'GrayText'}}
 78                  component="span"
 79                  variant="caption"
 80                >
 81                  {passenger.attributes.location}
 82                </Typography>
 83              )}
 84            </Box>
 85          }
 86        />
 87        <Actions passenger={passenger} />
 88      </Box>
 89    );
 90  } else {
 91    return (
 92      <>
 93        <ListItemAvatar>
 94          <ListItemIcon color="disabled">
 95            <Icon>person</Icon>
 96          </ListItemIcon>
 97        </ListItemAvatar>
 98        <ListItemText
 99          primary={t('travel.passengers.empty')}
100          sx={{color: theme.palette.text.secondary}}
101        />
102      </>
103    );
104  }
105};
106
107const getPassengerName = (
108  passenger: PassengerEntity,
109  canSeeFullName: boolean
110) => {
111  const hideName = (name: string) => (canSeeFullName ? name : `${name[0]}.`);
112
113  if (passenger.attributes.name && passenger.attributes.lastname)
114    return `${passenger.attributes.name} ${hideName(
115      passenger.attributes.lastname
116    )}`;
117
118  const linkedUser = passenger.attributes?.user?.data?.attributes;
119  if (linkedUser?.firstName && linkedUser?.lastName)
120    return `${linkedUser.firstName} ${hideName(linkedUser.lastName)}`;
121
122  return passenger.attributes.name;
123};
124
125export default Passenger;