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