1import React from 'react';
 2import Typography from '@material-ui/core/Typography';
 3import IconButton from '@material-ui/core/IconButton';
 4import Icon from '@material-ui/core/Icon';
 5import {makeStyles} from '@material-ui/core/styles';
 6import moment from 'moment';
 7import {useTranslation} from 'react-i18next';
 8import Link from '@material-ui/core/Link';
 9const Header = ({car, toggleEditing}) => {
10  const classes = useStyles();
11  const {t} = useTranslation();
12  return (
13    <div className={classes.header}>
14      <IconButton
15        size="small"
16        color="primary"
17        className={classes.editBtn}
18        onClick={toggleEditing}
19        id="EditCarBtn"
20      >
21        <Icon>edit</Icon>
22      </IconButton>
23      {!!car.departure && (
24        <Typography variant="overline" id="CarDeparture">
25          {moment(car.departure).format('LLLL')}
26        </Typography>
27      )}
28      <Typography variant="h5" id="CarName">
29        {car.name}
30      </Typography>
31      {!!car.phone_number && (
32        <div className={classes.section}>
33          <Typography variant="subtitle2">{t('car.fields.phone')}</Typography>
34          <Typography variant="body2" id="CarPhone">
35            {car.phone_number}
36          </Typography>
37        </div>
38      )}
39      {!!car.meeting && (
40        <div className={classes.section}>
41          <Typography variant="subtitle2">
42            {t('car.fields.meeting_point')}
43          </Typography>
44          <Typography variant="body2" id="CarMeeting">
45            <Link
46              component="a"
47              size="small"
48              target="_blank"
49              rel="noopener noreferrer"
50              href={`https://maps.google.com/?q=${encodeURI(car.meeting)}`}
51            >
52              {car.meeting}
53            </Link>
54          </Typography>
55        </div>
56      )}
57      {!!car.details && (
58        <div className={classes.section}>
59          <Typography variant="subtitle2">{t('car.fields.details')}</Typography>
60          <Typography variant="body2" id="CarDetails">
61            {car.details}
62          </Typography>
63        </div>
64      )}
65    </div>
66  );
67};
68
69const useStyles = makeStyles(theme => ({
70  header: {
71    padding: theme.spacing(2),
72  },
73  editBtn: {
74    position: 'absolute',
75    top: 0,
76    right: 0,
77    margin: theme.spacing(1),
78    zIndex: theme.zIndex.speedDial,
79  },
80  section: {
81    marginTop: theme.spacing(2),
82  },
83}));
84
85export default Header;