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=${event.address}`}
 97                  onClick={e => e.preventDefault}
 98                >
 99                  {event.address}
100                </Link>
101              ) : (
102                t('event.fields.empty')
103              )}
104            </Typography>
105          )}
106        </div>
107        <div className={classes.actions}>
108          <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
109            {t('event.actions.find_car')}
110          </Button>
111        </div>
112        {event.position && (
113          <div className={classes.map} id={`${idPrefix}AddressMap`}>
114            <Map position={event.position} />
115          </div>
116        )}
117      </div>
118    </ThemeProvider>
119  );
120};
121
122const useStyles = makeStyles(theme => ({
123  container: {
124    marginBottom: theme.spacing(12),
125  },
126  section: {
127    marginBottom: theme.spacing(2),
128  },
129  actions: {
130    display: 'flex',
131    justifyContent: 'center',
132    marginTop: theme.spacing(4),
133  },
134  map: {
135    marginTop: theme.spacing(4),
136  },
137  seeOnGMapButton: {
138    marginLeft: theme.spacing(2),
139  },
140}));
141
142export default EventDetails;