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">
 60          {t('event.fields.address')}
 61          {!isEditing && event.address && (
 62            <Button
 63              href={`https://www.google.ch/maps/place/${encodeURI(
 64                'event.address'
 65              )}`}
 66              size="small"
 67              color="primary"
 68              className={classes.seeOnGMapButton}
 69              id="SeeOnGoogleMap"
 70            >
 71              {t('event.actions.see_on_gmap')}
 72            </Button>
 73          )}
 74        </Typography>
 75        {isEditing ? (
 76          <TextField
 77            light
 78            multiline
 79            rows={4}
 80            value={editingEvent.address}
 81            onChange={e =>
 82              setEditingEvent({...editingEvent, address: e.target.value})
 83            }
 84            id={`${idPrefix}Address`}
 85            name="address"
 86          />
 87        ) : (
 88          <Typography variant="body1" id={`${idPrefix}Address`}>
 89            {event.address || t('event.fields.empty')}
 90          </Typography>
 91        )}
 92      </div>
 93      <div className={classes.actions}>
 94        <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
 95          {t('event.actions.find_car')}
 96        </Button>
 97      </div>
 98      {event.position && (
 99        <div className={classes.map} id={`${idPrefix}AddressMap`}>
100          <Map position={event.position} />
101        </div>
102      )}
103    </div>
104  );
105};
106
107const useStyles = makeStyles(theme => ({
108  section: {
109    marginBottom: theme.spacing(2),
110  },
111  actions: {
112    display: 'flex',
113    justifyContent: 'center',
114    marginTop: theme.spacing(4),
115  },
116  map: {
117    marginTop: theme.spacing(4),
118  },
119  seeOnGMapButton: {
120    marginLeft: theme.spacing(2),
121  },
122}));
123
124export default EventDetails;