1import moment from 'moment';
 2import Typography from '@mui/material/Typography';
 3import IconButton from '@mui/material/IconButton';
 4import Icon from '@mui/material/Icon';
 5import Box from '@mui/material/Box';
 6import Link from '@mui/material/Link';
 7import { useTheme } from '@mui/material/styles';
 8import {useTranslation} from 'react-i18next';
 9import getMapsLink from '../../lib/getMapsLink';
10import {Travel} from '../../generated/graphql';
11
12interface Props {
13  travel: Travel;
14  toggleEditing: () => void;
15}
16
17const Header = (props: Props) => {
18  const {travel, toggleEditing} = props;
19  const theme = useTheme()
20  const {t} = useTranslation();
21
22  return (
23    <Box sx={{padding: theme.spacing(2)}}>
24      <IconButton
25        size="small"
26        color="primary"
27        sx={{position: 'absolute',
28        top: 0,
29        right: 0,
30        margin: theme.spacing(1),
31        zIndex: theme.zIndex.speedDial}}
32        onClick={toggleEditing}
33        id="EditTravelBtn"
34      >
35        <Icon>edit</Icon>
36      </IconButton>
37      {!!travel.departure && (
38        <Typography variant="overline" id="TravelDeparture">
39          {moment(travel.departure).format('LLLL')}
40        </Typography>
41      )}
42      <Typography variant="h5" id="TravelName">
43        {travel.vehicleName}
44      </Typography>
45      {!!travel.phone_number && (
46        <Box sx={{marginTop: theme.spacing(2),}}>
47          <Typography variant="subtitle2">
48            {t('travel.fields.phone')}
49          </Typography>
50          <Typography variant="body2" id="TravelPhone">
51            {travel.phone_number}
52          </Typography>
53        </Box>
54      )}
55      {!!travel.meeting && (
56        <Box sx={{marginTop: theme.spacing(2),}}>
57          <Typography variant="subtitle2">
58            {t('travel.fields.meeting_point')}
59          </Typography>
60          <Typography variant="body2" id="TravelMeeting">
61            <Link
62              component="a"
63              target="_blank"
64              rel="noopener noreferrer"
65              href={getMapsLink(travel.meeting)}
66            >
67              {travel.meeting}
68            </Link>
69          </Typography>
70        </Box>
71      )}
72      {!!travel.details && (
73        <Box sx={{marginTop: theme.spacing(2),}}>
74          <Typography variant="subtitle2">
75            {t('travel.fields.details')}
76          </Typography>
77          <Typography variant="body2" id="TravelDetails">
78            {travel.details}
79          </Typography>
80        </Box>
81      )}
82    </Box>
83  );
84};
85
86export default Header;