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