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