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;
const idPrefix = isEditing ? 'EditEvent' : 'Event';
return (
{isEditing && (
{t('event.fields.name')}
setEditingEvent({...editingEvent, name: e.target.value})
}
id="EditEventName"
name="name"
/>
)}
{t('event.fields.starts_on')}
{isEditing ? (
setEditingEvent({...editingEvent, date: date?.toISOString()})
}
className={classes.textField}
fullWidth
format="DD.MM.YYYY"
disablePast
id={`${idPrefix}Date`}
name="date"
TextFieldComponent={p => }
cancelLabel={t('generic.cancel')}
/>
) : (
{event.date || t('event.fields.empty')}
)}
{t('event.fields.address')}
{isEditing ? (
setEditingEvent({...editingEvent, address: e.target.value})
}
id={`${idPrefix}Address`}
name="address"
/>
) : (
{event.address || t('event.fields.empty')}
)}
{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;