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