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        {isEditing && (
 23          <div className={classes.section}>
 24            <Typography variant="h6">{t('event.fields.name')}</Typography>
 25            <TextField
 26              light
 27              value={editingEvent.name ?? event.name}
 28              onChange={e =>
 29                setEditingEvent({...editingEvent, name: e.target.value})
 30              }
 31              id="EditEventName"
 32              name="name"
 33            />
 34          </div>
 35        )}
 36        <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
 37        {isEditing ? (
 38          <DatePicker
 39            value={
 40              editingEvent.date ? moment(editingEvent.date) : moment(event.date)
 41            }
 42            onChange={date =>
 43              setEditingEvent({...editingEvent, date: date.toISOString()})
 44            }
 45            className={classes.textField}
 46            fullWidth
 47            format="DD.MM.YYYY"
 48            disablePast
 49            id={`${idPrefix}Date`}
 50            name="date"
 51            TextFieldComponent={p => <TextField light {...p} />}
 52          />
 53        ) : (
 54          <Typography variant="body1" id={`${idPrefix}Date`}>
 55            {event.date || t('event.fields.empty')}
 56          </Typography>
 57        )}
 58      </div>
 59      <div className={classes.section}>
 60        <Typography variant="h6">{t('event.fields.address')}</Typography>
 61        {isEditing ? (
 62          <TextField
 63            light
 64            multiline
 65            rows={4}
 66            value={editingEvent.address ?? event.address}
 67            onChange={e =>
 68              setEditingEvent({...editingEvent, address: e.target.value})
 69            }
 70            id={`${idPrefix}Address`}
 71            name="address"
 72          />
 73        ) : (
 74          <Typography variant="body1" id={`${idPrefix}Address`}>
 75            {event.address || t('event.fields.empty')}
 76          </Typography>
 77        )}
 78      </div>
 79      <div className={classes.actions}>
 80        <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
 81          {t('event.actions.find_car')}
 82        </Button>
 83      </div>
 84      {event.position && (
 85        <div className={classes.map} id={`${idPrefix}AddressMap`}>
 86          <Map position={event.position} />
 87        </div>
 88      )}
 89    </div>
 90  );
 91};
 92
 93const useStyles = makeStyles(theme => ({
 94  section: {
 95    marginBottom: theme.spacing(2),
 96  },
 97  actions: {
 98    display: 'flex',
 99    justifyContent: 'center',
100    marginTop: theme.spacing(4),
101  },
102  map: {
103    marginTop: theme.spacing(4),
104  },
105}));
106
107export default EventDetails;