1import React from 'react';
 2import Typography from '@material-ui/core/Typography';
 3import TextField from '../../components/TextField';
 4import moment from 'moment';
 5import {useEvent} from '../../contexts/Event';
 6import {useTranslation} from 'react-i18next';
 7import {makeStyles} from '@material-ui/core';
 8import Button from '@material-ui/core/Button';
 9import {DatePicker} from '@material-ui/pickers';
10import Map from '../../components/Map';
11
12const EventDetails = ({toggleDetails}) => {
13  const {t} = useTranslation();
14  const classes = useStyles();
15  const {event, isEditing, setEditingEvent, editingEvent} = useEvent();
16
17  if (!event) return null;
18  const idPrefix = isEditing ? 'EditEvent' : 'Event';
19  return (
20    <div>
21      <div className={classes.section}>
22        <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
23        {isEditing ? (
24          <DatePicker
25            value={
26              editingEvent.date ? moment(editingEvent.date) : moment(event.date)
27            }
28            onChange={date =>
29              setEditingEvent({...editingEvent, date: date.toISOString()})
30            }
31            className={classes.textField}
32            fullWidth
33            format="DD.MM.YYYY"
34            disablePast
35            id={`${idPrefix}Date`}
36            name="date"
37            TextFieldComponent={p => <TextField light {...p} />}
38          />
39        ) : (
40          <Typography variant="body1" id={`${idPrefix}Date`}>
41            {event.date}
42          </Typography>
43        )}
44      </div>
45      <div className={classes.section}>
46        <Typography variant="h6">{t('event.fields.address')}</Typography>
47        {isEditing ? (
48          <TextField
49            light
50            multiline
51            rows={4}
52            value={editingEvent.address ?? event.address}
53            onChange={e =>
54              setEditingEvent({...editingEvent, address: e.target.value})
55            }
56            id={`${idPrefix}Address`}
57            name="address"
58          />
59        ) : (
60          <Typography variant="body1" id={`${idPrefix}Address`}>
61            {event.address}
62          </Typography>
63        )}
64      </div>
65      <div className={classes.actions}>
66        <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
67          {t('event.actions.find_car')}
68        </Button>
69      </div>
70      {event.position && (
71        <div className={classes.map} id={`${idPrefix}AddressMap`}>
72          <Map position={event.position} />
73        </div>
74      )}
75    </div>
76  );
77};
78
79const useStyles = makeStyles(theme => ({
80  section: {
81    marginBottom: theme.spacing(2),
82  },
83  actions: {
84    display: 'flex',
85    justifyContent: 'center',
86    marginTop: theme.spacing(4),
87  },
88  map: {
89    marginTop: theme.spacing(4),
90  },
91}));
92
93export default EventDetails;