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', top: 0, right: 0, margin: theme.spacing(1)}}
28        onClick={toggleEditing}
29        id="EditTravelBtn"
30      >
31        <Icon>edit</Icon>
32      </IconButton>
33      {!!travel.departure && (
34        <Typography variant="overline" id="TravelDeparture">
35          {moment(travel.departure).format('LLLL')}
36        </Typography>
37      )}
38      <Typography variant="h5" id="TravelName">
39        {travel.vehicleName}
40      </Typography>
41      {!!travel.phone_number && (
42        <Box sx={{marginTop: theme.spacing(2)}}>
43          <Typography variant="subtitle2">
44            {t('travel.fields.phone')}
45          </Typography>
46          <Typography variant="body2" id="TravelPhone">
47            {travel.phone_number}
48          </Typography>
49        </Box>
50      )}
51      {!!travel.meeting && (
52        <Box sx={{marginTop: theme.spacing(2)}}>
53          <Typography variant="subtitle2">
54            {t('travel.fields.meeting_point')}
55          </Typography>
56          <Typography variant="body2" id="TravelMeeting">
57            <Link
58              component="a"
59              target="_blank"
60              rel="noopener noreferrer"
61              href={getMapsLink(travel.meeting)}
62            >
63              {travel.meeting}
64            </Link>
65          </Typography>
66        </Box>
67      )}
68      {!!travel.details && (
69        <Box sx={{marginTop: theme.spacing(2)}}>
70          <Typography variant="subtitle2">
71            {t('travel.fields.details')}
72          </Typography>
73          <Typography variant="body2" id="TravelDetails">
74            {travel.details}
75          </Typography>
76        </Box>
77      )}
78    </Box>
79  );
80};
81
82export default Header;