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