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