1import moment from 'moment';
 2import Box from '@mui/material/Box';
 3import Typography from '@mui/material/Typography';
 4import ListItem from '@mui/material/ListItem';
 5import Link from '@mui/material/Link';
 6import Button from '@mui/material/Button';
 7import Divider from '@mui/material/Divider';
 8import LinearProgress from '@mui/material/LinearProgress';
 9import {useTranslation} from 'next-i18next';
10import getMapsLink from '../../lib/getMapsLink';
11import {TravelEntity} from '../../generated/graphql';
12import usePermissions from '../../hooks/usePermissions';
13import {getTravelName} from '../../lib/travels';
14
15interface Props {
16  travel: TravelEntity;
17  assign: (travel: TravelEntity) => void;
18}
19
20const AvailableTravel = ({travel, assign}: Props) => {
21  const {t} = useTranslation();
22  const passengersCount = travel.attributes.passengers?.data.length || 0;
23  const availableSeats = travel.attributes.seats - passengersCount;
24  const {
25    userPermissions: {canSeeFullName},
26  } = usePermissions();
27
28  return (
29    <>
30      <Divider />
31      <ListItem sx={{flexDirection: 'column', p: 2}}>
32        <Box display="flex" justifyContent="space-between" width={1}>
33          <Box>
34            {travel.attributes.departureDate && (
35              <Typography variant="overline" color="GrayText">
36                {t('passenger.assign.departure')}
37                {moment(travel.attributes.departureDate).format('dddd LL')}{' '}
38                {travel.attributes.departureTime || ''}
39              </Typography>
40            )}
41            <Typography variant="body1" sx={{pt: 1}}>
42              {getTravelName(travel, canSeeFullName())}
43            </Typography>
44          </Box>
45          <Button
46            color="primary"
47            variant="contained"
48            size="small"
49            sx={{maxHeight: '24px'}}
50            onClick={() => assign(travel)}
51          >
52            {t('passenger.assign.assign')}
53          </Button>
54        </Box>
55        <LinearProgress
56          sx={{
57            width: 1,
58            mt: 2,
59            mb: 1,
60            backgroundColor: 'LightGray',
61            '& .MuiLinearProgress-bar': {
62              backgroundColor: 'Gray',
63            },
64          }}
65          value={(passengersCount / travel.attributes.seats || 0) * 100}
66          variant={travel.attributes.seats ? 'determinate' : 'indeterminate'}
67        />
68        <Box display="flex" justifyContent="space-between" width={1}>
69          <Typography variant="body1" color="GrayText" minWidth="150px">
70            {t('passenger.assign.seats', {
71              count: availableSeats || 0,
72            })}
73          </Typography>
74          <Link
75            sx={{
76              maxWidth: 'calc(100% - 150px)',
77              overflow: 'hidden',
78              textOverflow: 'ellipsis',
79              whiteSpace: 'nowrap',
80              paddingLeft: 2,
81            }}
82            variant="overline"
83            target="_blank"
84            rel="noreferrer"
85            href={getMapsLink(travel.attributes.meeting)}
86            onClick={e => e.preventDefault}
87          >
88            {travel.attributes.meeting}
89          </Link>
90        </Box>
91      </ListItem>
92    </>
93  );
94};
95
96export default AvailableTravel;