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