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
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="UpdateEventDate"
36            name="date"
37            TextFieldComponent={(p) => <TextField light {...p} />}
38          />
39        ) : (
40          <Typography variant="body1">{event.date}</Typography>
41        )}
42      </div>
43      <div className={classes.section}>
44        <Typography variant="h6">{t("event.fields.address")}</Typography>
45        {isEditing ? (
46          <TextField
47            light
48            multiline
49            rows={4}
50            value={editingEvent.address ?? event.address}
51            onChange={(e) =>
52              setEditingEvent({ ...editingEvent, address: e.target.value })
53            }
54            id="UpdateEventAddress"
55            name="address"
56          />
57        ) : (
58          <Typography variant="body1">{event.address}</Typography>
59        )}
60      </div>
61      <div className={classes.actions}>
62        <Button onClick={toggleDetails} variant="contained">
63          {t("event.actions.find_car")}
64        </Button>
65      </div>
66      {event.position && (
67        <div className={classes.map}>
68          <Map position={event.position} />
69        </div>
70      )}
71    </div>
72  );
73};
74
75const useStyles = makeStyles((theme) => ({
76  section: {
77    marginBottom: theme.spacing(2),
78  },
79  actions: {
80    display: "flex",
81    justifyContent: "center",
82    marginTop: theme.spacing(4),
83  },
84  map: {
85    marginTop: theme.spacing(4),
86  },
87}));
88
89export default EventDetails;