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 Map from '../../components/Map';
 12import {caroster} from '../../theme';
 13
 14const theme = createMuiTheme({
 15  ...caroster,
 16  palette: {
 17    ...caroster.palette,
 18    type: 'dark',
 19  },
 20});
 21
 22const EventDetails = ({toggleDetails}) => {
 23  const {t} = useTranslation();
 24  const classes = useStyles();
 25  const {event, isEditing, setEditingEvent, editingEvent} = useEvent();
 26
 27  if (!event) return null;
 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              fullWidth
 63              format="DD.MM.YYYY"
 64              disablePast
 65              id={`${idPrefix}Date`}
 66              name="date"
 67              TextFieldComponent={p => <TextField {...p} />}
 68              cancelLabel={t('generic.cancel')}
 69            />
 70          ) : (
 71            <Typography variant="body1" id={`${idPrefix}Date`}>
 72              {moment(event.date).format('DD.MM.YYYY') ||
 73                t('event.fields.empty')}
 74            </Typography>
 75          )}
 76        </div>
 77        <div className={classes.section}>
 78          <Typography variant="h6">{t('event.fields.address')}</Typography>
 79          {isEditing ? (
 80            <TextField
 81              defaultValue={event.address}
 82              value={editingEvent.address}
 83              onChange={e =>
 84                setEditingEvent({...editingEvent, address: e.target.value})
 85              }
 86              fullWidth
 87              multiline
 88              rows={4}
 89              id={`${idPrefix}Address`}
 90              name="address"
 91            />
 92          ) : (
 93            <Typography variant="body1" id={`${idPrefix}Address`}>
 94              {event.address ? (
 95                <Link
 96                  href={`https://maps.google.com/?q=${encodeURI(
 97                    event.address
 98                  )}`}
 99                  rel="noopener noreferrer"
100                  component="a"
101                  target="_blank"
102                >
103                  {event.address}
104                </Link>
105              ) : (
106                t('event.fields.empty')
107              )}
108            </Typography>
109          )}
110        </div>
111        <div className={classes.actions}>
112          <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
113            {t('event.actions.find_car')}
114          </Button>
115        </div>
116        {event.position && (
117          <div className={classes.map} id={`${idPrefix}AddressMap`}>
118            <Map position={event.position} />
119          </div>
120        )}
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;