1import {useRef} from 'react';
  2import {makeStyles, createMuiTheme, ThemeProvider} from '@material-ui/core';
  3import Typography from '@material-ui/core/Typography';
  4import TextField from '@material-ui/core/TextField';
  5import Link from '@material-ui/core/Link';
  6import Box from '@material-ui/core/Box';
  7import {DatePicker} from '@material-ui/pickers';
  8import {useTranslation} from 'react-i18next';
  9import moment from 'moment';
 10import useEventStore from '../../stores/useEventStore';
 11import {caroster} from '../../theme';
 12import CopyLink from '../../components/CopyLink';
 13import useToastStore from '../../stores/useToastStore';
 14
 15const EventDetails = () => {
 16  const {t} = useTranslation();
 17  const event = useEventStore(s => s.event);
 18  const addToast = useToastStore(s => s.addToast);
 19  const setEventUpdate = useEventStore(s => s.setEventUpdate);
 20  const isEditing = useEventStore(s => s.isEditing);
 21  const shareInput = useRef(null);
 22  const idPrefix = isEditing ? 'EditEvent' : 'Event';
 23  const classes = useStyles();
 24
 25  if (!event) return null;
 26
 27  return (
 28    <ThemeProvider theme={theme}>
 29      <Box className={classes.container}>
 30        <div className={classes.section}>
 31          {isEditing && (
 32            <div className={classes.section}>
 33              <Typography variant="h6">{t('event.fields.name')}</Typography>
 34              <TextField
 35                fullWidth
 36                value={event.name}
 37                onChange={e => setEventUpdate({name: e.target.value})}
 38                name="name"
 39                id="EditEventName"
 40              />
 41            </div>
 42          )}
 43          <Typography variant="h6">{t('event.fields.date')}</Typography>
 44          {isEditing ? (
 45            <DatePicker
 46              fullWidth
 47              placeholder={t('event.fields.date_placeholder')}
 48              value={event.date}
 49              onChange={date =>
 50                setEventUpdate({
 51                  date: !date ? null : moment(date).format('YYYY-MM-DD'),
 52                })
 53              }
 54              format="DD/MM/YYYY"
 55              cancelLabel={t('generic.cancel')}
 56              clearable
 57              clearLabel={t('generic.clear')}
 58              id={`${idPrefix}Date`}
 59            />
 60          ) : (
 61            <Typography variant="body1" id={`${idPrefix}Date`}>
 62              {event.date
 63                ? moment(event.date).format('DD/MM/YYYY')
 64                : t('event.fields.empty')}
 65            </Typography>
 66          )}
 67        </div>
 68        <div className={classes.section}>
 69          <Typography variant="h6">{t('event.fields.address')}</Typography>
 70          {isEditing ? (
 71            <TextField
 72              fullWidth
 73              multiline
 74              rowsMax={4}
 75              inputProps={{maxLength: 250}}
 76              helperText={`${event.address?.length ?? 0}/250`}
 77              defaultValue={event.address}
 78              value={event.address}
 79              onChange={e => setEventUpdate({address: e.target.value})}
 80              id={`${idPrefix}Address`}
 81              name="address"
 82            />
 83          ) : (
 84            <Typography variant="body1" id={`${idPrefix}Address`}>
 85              {event.address ? (
 86                <Link
 87                  target="_blank"
 88                  rel="noreferrer"
 89                  href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
 90                    event.address
 91                  )}`}
 92                  onClick={e => e.preventDefault}
 93                >
 94                  {event.address}
 95                </Link>
 96              ) : (
 97                t('event.fields.empty')
 98              )}
 99            </Typography>
100          )}
101        </div>
102        <div className={classes.section}>
103          <Typography variant="h6">{t('event.fields.description')}</Typography>
104          {isEditing ? (
105            <TextField
106              fullWidth
107              multiline
108              rowsMax={4}
109              inputProps={{maxLength: 250}}
110              helperText={`${event.description?.length || 0}/250`}
111              defaultValue={event.description}
112              value={event.description || ''}
113              onChange={e => setEventUpdate({description: e.target.value})}
114              id={`${idPrefix}Description`}
115              name="description"
116            />
117          ) : (
118            <Typography variant="body1" id={`${idPrefix}Description`}>
119              {event.description ?? t('event.fields.empty')}
120            </Typography>
121          )}
122        </div>
123        <Typography variant="h6">{t('event.fields.link')}</Typography>
124        <Typography>{t('event.fields.link_desc')}</Typography>
125        <TextField
126          value={window.location.href}
127          inputProps={{
128            ref: shareInput,
129          }}
130          InputProps={{disableUnderline: true}}
131          onFocus={() => {
132            if (shareInput) shareInput.current.select();
133          }}
134          fullWidth
135          readOnly
136          name="eventShareLink"
137          id="ShareLink"
138        />
139
140        <CopyLink
141          buttonText={t('event.fields.share')}
142          title={`Caroster ${event.name}`}
143          url={`${window.location.href}`}
144          onShare={() => {
145            addToast(t('event.actions.copied'));
146          }}
147        />
148      </Box>
149    </ThemeProvider>
150  );
151};
152
153const theme = createMuiTheme({
154  ...caroster,
155  palette: {
156    ...caroster.palette,
157    type: 'dark',
158  },
159});
160
161const useStyles = makeStyles(theme => ({
162  container: {
163    padding: theme.spacing(2, 9),
164    marginBottom: theme.spacing(12),
165
166    [theme.breakpoints.down('xs')]: {
167      padding: theme.spacing(2),
168    },
169  },
170  section: {
171    marginBottom: theme.spacing(2),
172    width: '540px',
173    maxWidth: '100%',
174  },
175  map: {
176    marginTop: theme.spacing(4),
177  },
178  seeOnGMapButton: {
179    marginLeft: theme.spacing(2),
180  },
181}));
182
183export default EventDetails;