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