1import React from 'react';
  2import Typography from '@material-ui/core/Typography';
  3import Button from '@material-ui/core/Button';
  4import Link from '@material-ui/core/Link';
  5import {DatePicker} from '@material-ui/pickers';
  6import TextField from '@material-ui/core/TextField';
  7import {makeStyles, createMuiTheme, ThemeProvider} from '@material-ui/core';
  8import {useTranslation} from 'react-i18next';
  9import moment from 'moment';
 10import {useEvent} from '../../contexts/Event';
 11import {caroster} from '../../theme';
 12
 13const theme = createMuiTheme({
 14  ...caroster,
 15  palette: {
 16    ...caroster.palette,
 17    type: 'dark',
 18  },
 19});
 20
 21const EventDetails = ({toggleDetails}) => {
 22  const {t} = useTranslation();
 23  const classes = useStyles();
 24  const {event, isEditing, setEditingEvent, editingEvent} = useEvent();
 25
 26  if (!event) return null;
 27
 28  const idPrefix = isEditing ? 'EditEvent' : 'Event';
 29
 30  return (
 31    <ThemeProvider theme={theme}>
 32      <div className={classes.container}>
 33        <div className={classes.section}>
 34          {isEditing && (
 35            <div className={classes.section}>
 36              <Typography variant="h6">{t('event.fields.name')}</Typography>
 37              <TextField
 38                defaultValue={event.name}
 39                value={editingEvent.name}
 40                onChange={e =>
 41                  setEditingEvent({...editingEvent, name: e.target.value})
 42                }
 43                fullWidth
 44                id="EditEventName"
 45                name="name"
 46              />
 47            </div>
 48          )}
 49          <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
 50          {isEditing ? (
 51            <DatePicker
 52              format="DD.MM.YYYY"
 53              value={
 54                editingEvent.date
 55                  ? moment(editingEvent.date)
 56                  : event.date
 57                  ? moment(event.date)
 58                  : null
 59              }
 60              onChange={date =>
 61                setEditingEvent({
 62                  ...editingEvent,
 63                  date: moment(date).format('YYYY-MM-DD'),
 64                })
 65              }
 66              TextFieldComponent={p => <TextField {...p} />}
 67              minDateMessage={t('generic.errors.date_min')}
 68              cancelLabel={t('generic.cancel')}
 69              name="date"
 70              disablePast
 71              fullWidth
 72              id={`${idPrefix}Date`}
 73            />
 74          ) : (
 75            <Typography variant="body1" id={`${idPrefix}Date`}>
 76              {event.date
 77                ? moment(event.date).format('DD.MM.YYYY')
 78                : t('event.fields.empty')}
 79            </Typography>
 80          )}
 81        </div>
 82        <div className={classes.section}>
 83          <Typography variant="h6">{t('event.fields.address')}</Typography>
 84          {isEditing ? (
 85            <TextField
 86              defaultValue={event.address}
 87              value={editingEvent.address}
 88              onChange={e =>
 89                setEditingEvent({...editingEvent, address: e.target.value})
 90              }
 91              fullWidth
 92              multiline
 93              rows={4}
 94              id={`${idPrefix}Address`}
 95              name="address"
 96            />
 97          ) : (
 98            <Typography variant="body1" id={`${idPrefix}Address`}>
 99              {event.address ? (
100                <Link
101                  target="_blank"
102                  rel="noreferrer"
103                  href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
104                    event.address
105                  )}`}
106                  onClick={e => e.preventDefault}
107                >
108                  {event.address}
109                </Link>
110              ) : (
111                t('event.fields.empty')
112              )}
113            </Typography>
114          )}
115        </div>
116        <div className={classes.actions}>
117          <Button onClick={toggleDetails} variant="outlined" id={`CarFindBtn`}>
118            {t('event.actions.find_car')}
119          </Button>
120        </div>
121      </div>
122    </ThemeProvider>
123  );
124};
125
126const useStyles = makeStyles(theme => ({
127  container: {
128    marginBottom: theme.spacing(12),
129  },
130  section: {
131    marginBottom: theme.spacing(2),
132  },
133  actions: {
134    display: 'flex',
135    justifyContent: 'center',
136    marginTop: theme.spacing(4),
137  },
138  map: {
139    marginTop: theme.spacing(4),
140  },
141  seeOnGMapButton: {
142    marginLeft: theme.spacing(2),
143  },
144}));
145
146export default EventDetails;