1import moment from 'moment';
 2import Card from '@mui/material/Card';
 3import Typography from '@mui/material/Typography';
 4import Link from '@mui/material/Link';
 5import Box from '@mui/material/Box';
 6import {Travel} from '../../generated/graphql';
 7import {Popup} from 'react-leaflet';
 8import {useTranslation} from 'react-i18next';
 9import useMapStore from '../../stores/useMapStore';
10import getMapsLink from '../../lib/getMapsLink';
11
12interface Props {
13  travel: Travel & {id: string};
14}
15
16const TravelPopup = ({travel}: Props) => {
17  const {t} = useTranslation();
18  const {setFocusOnTravel} = useMapStore();
19  return (
20    <Popup>
21      <Card
22        sx={{p: 2, width: '350px', maxWidth: '100%', cursor: 'pointer'}}
23        onClick={() => {
24          setFocusOnTravel(travel);
25          const travelCard = document?.getElementById(travel.id);
26          travelCard?.scrollIntoView({behavior: 'smooth'});
27        }}
28      >
29        {!!travel.departure && (
30          <Typography variant="overline" color="Graytext" id="TravelDeparture">
31            {moment(travel.departure).format('LLLL')}
32          </Typography>
33        )}
34        <Box>
35          <Typography variant="h5">{travel.vehicleName}</Typography>
36        </Box>
37        {!!travel.phone_number && (
38          <Box sx={{marginTop: 2}}>
39            <Typography variant="overline" color="GrayText">
40              {t('travel.fields.phone')}
41            </Typography>
42            <Typography variant="body1">{travel.phone_number}</Typography>
43          </Box>
44        )}
45        {!!travel.meeting && (
46          <Box sx={{marginTop: 2}}>
47            <Typography variant="overline" color="GrayText">
48              {t('travel.fields.meeting_point')}
49            </Typography>
50            <Typography variant="body1" color="primary">
51              <Link
52                component="a"
53                target="_blank"
54                rel="noopener noreferrer"
55                href={getMapsLink(travel.meeting)}
56                onClick={e => e.stopPropagation()}
57                sx={{color: 'primary.main'}}
58              >
59                {travel.meeting}
60              </Link>
61            </Typography>
62          </Box>
63        )}
64      </Card>
65    </Popup>
66  );
67};
68export default TravelPopup;