1import {ReactNode, useReducer} 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';
 15import DrawerPassenger from '../DrawerPassenger';
 16import usePermissions from '../../hooks/usePermissions';
 17
 18interface Props {
 19  passenger?: PassengerEntity;
 20  button?: ReactNode;
 21  isTravel?: boolean;
 22}
 23
 24const Passenger = (props: Props) => {
 25  const {passenger, button, isTravel} = props;
 26  const theme = useTheme();
 27  const {t} = useTranslation();
 28
 29  const [openDrawerPassenger, toggleDrawerPassenger] = useReducer(
 30    i => !i,
 31    false
 32  );
 33
 34  const {
 35    userPermissions: {canSeePassengerDetails},
 36  } = usePermissions();
 37
 38  const {userId} = useProfile();
 39  const isUser = `${userId}` === passenger?.attributes.user?.data?.id;
 40  const showLocation = isTravel ? null : (
 41    <Typography
 42      sx={{pl: 1, color: 'GrayText'}}
 43      component="span"
 44      variant="caption"
 45    >
 46      {passenger.attributes.location}
 47    </Typography>
 48  );
 49
 50  if (passenger) {
 51    return (
 52      <Box sx={{width: 1}} aria-label="user informations">
 53        <ListItemText
 54          primary={
 55            <Box
 56              onClick={toggleDrawerPassenger}
 57              sx={{
 58                width: 1,
 59                maxWidth: 1,
 60                overflow: 'hidden',
 61                textOverflow: 'ellipsis',
 62                whiteSpace: 'nowrap',
 63                cursor: canSeePassengerDetails(passenger)
 64                  ? 'pointer'
 65                  : 'inherit',
 66              }}
 67            >
 68              <Icon fontSize="inherit" sx={{verticalAlign: 'middle', mr: 0.5}}>
 69                person_outlined
 70              </Icon>
 71              <Typography
 72                component="span"
 73                variant="body1"
 74                sx={{
 75                  overflow: 'hidden',
 76                  maxWidth: 'calc(100% - 88px)',
 77                  textOverflow: 'ellipsis',
 78                  whiteSpace: 'nowrap',
 79                }}
 80              >
 81                {passenger.attributes.name}
 82              </Typography>
 83              {isUser && (
 84                <Chip
 85                  sx={{marginLeft: 1}}
 86                  label={t('generic.me')}
 87                  variant="outlined"
 88                />
 89              )}
 90              {showLocation}
 91            </Box>
 92          }
 93        />
 94        {button}
 95        {canSeePassengerDetails(passenger) && (
 96          <DrawerPassenger
 97            isOpen={openDrawerPassenger}
 98            onClose={() => toggleDrawerPassenger()}
 99            firstName={passenger?.attributes.user?.data?.attributes.firstName}
100            lastName={passenger?.attributes.user?.data?.attributes.lastName}
101            email={passenger?.attributes.email}
102          />
103        )}
104      </Box>
105    );
106  } else {
107    return (
108      <>
109        <ListItemAvatar>
110          <ListItemIcon color="disabled">
111            <Icon>person</Icon>
112          </ListItemIcon>
113        </ListItemAvatar>
114        <ListItemText
115          primary={t('travel.passengers.empty')}
116          sx={{color: theme.palette.text.secondary}}
117        />
118      </>
119    );
120  }
121};
122
123export default Passenger;