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