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 classes = useStyles();
 18  const event = useEventStore(s => s.event);
 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
 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                value={event.name}
 35                onChange={e => setEventUpdate({name: e.target.value})}
 36                fullWidth
 37                id="EditEventName"
 38                name="name"
 39              />
 40            </div>
 41          )}
 42          <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
 43          {isEditing ? (
 44            <DatePicker
 45              id={`${idPrefix}Date`}
 46              fullWidth
 47              label={t('event.creation.date')}
 48              format="DD/MM/YYYY"
 49              value={event.date}
 50              onChange={date =>
 51                setEventUpdate({
 52                  date: !date ? null : moment(date).format('YYYY-MM-DD'),
 53                })
 54              }
 55              clearable
 56              clearLabel={t('generic.clear')}
 57              cancelLabel={t('generic.cancel')}
 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              defaultValue={event.address}
 72              value={event.address}
 73              onChange={e => setEventUpdate({address: e.target.value})}
 74              fullWidth
 75              multiline
 76              rows={4}
 77              id={`${idPrefix}Address`}
 78              name="address"
 79            />
 80          ) : (
 81            <Typography variant="body1" id={`${idPrefix}Address`}>
 82              {event.address ? (
 83                <Link
 84                  target="_blank"
 85                  rel="noreferrer"
 86                  href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
 87                    event.address
 88                  )}`}
 89                  onClick={e => e.preventDefault}
 90                >
 91                  {event.address}
 92                </Link>
 93              ) : (
 94                t('event.fields.empty')
 95              )}
 96            </Typography>
 97          )}
 98        </div>
 99        <Typography variant="h6">{t('event.fields.link')}</Typography>
100        <Typography>{t('event.fields.link_desc')}</Typography>
101        <TextField
102          value={window.location.href}
103          inputProps={{
104            ref: shareInput,
105          }}
106          InputProps={{disableUnderline: true}}
107          onFocus={() => {
108            if (shareInput) shareInput.current.select();
109          }}
110          fullWidth
111          readOnly
112          name="eventShareLink"
113          id="ShareLink"
114        />
115
116        <Button
117          variant="outlined"
118          startIcon={<Icon>share</Icon>}
119          onClick={() => {
120            if (shareInput) shareInput.current.select();
121            onShare();
122          }}
123        >
124          {t('event.fields.share')}
125        </Button>
126      </Box>
127    </ThemeProvider>
128  );
129};
130
131const theme = createMuiTheme({
132  ...caroster,
133  palette: {
134    ...caroster.palette,
135    type: 'dark',
136  },
137});
138
139const useStyles = makeStyles(theme => ({
140  container: {
141    padding: theme.spacing(2, 9),
142    marginBottom: theme.spacing(12),
143
144    [theme.breakpoints.down('xs')]: {
145      padding: theme.spacing(2),
146    },
147  },
148  section: {
149    marginBottom: theme.spacing(2),
150  },
151  map: {
152    marginTop: theme.spacing(4),
153  },
154  seeOnGMapButton: {
155    marginLeft: theme.spacing(2),
156  },
157}));
158
159export default EventDetails;