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              value={
 53                editingEvent.date
 54                  ? moment(editingEvent.date)
 55                  : event.date
 56                  ? moment(event.date)
 57                  : null
 58              }
 59              onChange={date =>
 60                setEditingEvent({...editingEvent, date: date?.toISOString()})
 61              }
 62              format="DD.MM.YYYY"
 63              TextFieldComponent={p => <TextField {...p} />}
 64              minDateMessage={t('generic.errors.date_min')}
 65              cancelLabel={t('generic.cancel')}
 66              name="date"
 67              disablePast
 68              fullWidth
 69              id={`${idPrefix}Date`}
 70            />
 71          ) : (
 72            <Typography variant="body1" id={`${idPrefix}Date`}>
 73              {event.date
 74                ? moment(event.date).format('DD.MM.YYYY')
 75                : t('event.fields.empty')}
 76            </Typography>
 77          )}
 78        </div>
 79        <div className={classes.section}>
 80          <Typography variant="h6">{t('event.fields.address')}</Typography>
 81          {isEditing ? (
 82            <TextField
 83              defaultValue={event.address}
 84              value={editingEvent.address}
 85              onChange={e =>
 86                setEditingEvent({...editingEvent, address: e.target.value})
 87              }
 88              fullWidth
 89              multiline
 90              rows={4}
 91              id={`${idPrefix}Address`}
 92              name="address"
 93            />
 94          ) : (
 95            <Typography variant="body1" id={`${idPrefix}Address`}>
 96              {event.address ? (
 97                <Link
 98                  target="_blank"
 99                  rel="noreferrer"
100                  href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
101                    event.address
102                  )}`}
103                  onClick={e => e.preventDefault}
104                >
105                  {event.address}
106                </Link>
107              ) : (
108                t('event.fields.empty')
109              )}
110            </Typography>
111          )}
112        </div>
113        <div className={classes.actions}>
114          <Button onClick={toggleDetails} variant="outlined" id={`CarFindBtn`}>
115            {t('event.actions.find_car')}
116          </Button>
117        </div>
118      </div>
119    </ThemeProvider>
120  );
121};
122
123const useStyles = makeStyles(theme => ({
124  container: {
125    marginBottom: theme.spacing(12),
126  },
127  section: {
128    marginBottom: theme.spacing(2),
129  },
130  actions: {
131    display: 'flex',
132    justifyContent: 'center',
133    marginTop: theme.spacing(4),
134  },
135  map: {
136    marginTop: theme.spacing(4),
137  },
138  seeOnGMapButton: {
139    marginLeft: theme.spacing(2),
140  },
141}));
142
143export default EventDetails;