import React from "react";
import Typography from "@material-ui/core/Typography";
import TextField from "../../components/TextField";
import moment from "moment";
import { useEvent } from "../../contexts/Event";
import { useTranslation } from "react-i18next";
import { makeStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import { DatePicker } from "@material-ui/pickers";
import Map from "../../components/Map";
const EventDetails = ({ toggleDetails }) => {
const { t } = useTranslation();
const classes = useStyles();
const { event, isEditing, setEditingEvent, editingEvent } = useEvent();
if (!event) return null;
return (
{t("event.fields.starts_on")}
{isEditing ? (
setEditingEvent({ ...editingEvent, date: date.toISOString() })
}
className={classes.textField}
fullWidth
format="DD.MM.YYYY"
disablePast
id="UpdateEventDate"
name="date"
TextFieldComponent={(p) => }
/>
) : (
{event.date}
)}
{t("event.fields.address")}
{isEditing ? (
setEditingEvent({ ...editingEvent, address: e.target.value })
}
id="UpdateEventAddress"
name="address"
/>
) : (
{event.address}
)}
{event.position && (
)}
);
};
const useStyles = makeStyles((theme) => ({
section: {
marginBottom: theme.spacing(2),
},
actions: {
display: "flex",
justifyContent: "center",
marginTop: theme.spacing(4),
},
map: {
marginTop: theme.spacing(4),
},
}));
export default EventDetails;