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