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}/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        <Typography variant="h6">{t('event.fields.link')}</Typography>
102        <Typography>{t('event.fields.link_desc')}</Typography>
103        <TextField
104          value={window.location.href}
105          inputProps={{
106            ref: shareInput,
107          }}
108          InputProps={{disableUnderline: true}}
109          onFocus={() => {
110            if (shareInput) shareInput.current.select();
111          }}
112          fullWidth
113          readOnly
114          name="eventShareLink"
115          id="ShareLink"
116        />
117
118        <Button
119          className={'tour_event_share'}
120          variant="outlined"
121          startIcon={<Icon>share</Icon>}
122          onClick={() => {
123            if (shareInput) shareInput.current.select();
124            onShare();
125          }}
126        >
127          {t('event.fields.share')}
128        </Button>
129      </Box>
130    </ThemeProvider>
131  );
132};
133
134const theme = createMuiTheme({
135  ...caroster,
136  palette: {
137    ...caroster.palette,
138    type: 'dark',
139  },
140});
141
142const useStyles = makeStyles(theme => ({
143  container: {
144    padding: theme.spacing(2, 9),
145    marginBottom: theme.spacing(12),
146
147    [theme.breakpoints.down('xs')]: {
148      padding: theme.spacing(2),
149    },
150  },
151  section: {
152    marginBottom: theme.spacing(2),
153  },
154  map: {
155    marginTop: theme.spacing(4),
156  },
157  seeOnGMapButton: {
158    marginLeft: theme.spacing(2),
159  },
160}));
161
162export default EventDetails;