1import React, {useEffect, useState, useReducer} from 'react';
  2import AppBar from '@material-ui/core/AppBar';
  3import Toolbar from '@material-ui/core/Toolbar';
  4import Typography from '@material-ui/core/Typography';
  5import Container from '@material-ui/core/Container';
  6import IconButton from '@material-ui/core/IconButton';
  7import Icon from '@material-ui/core/Icon';
  8import {makeStyles} from '@material-ui/core/styles';
  9import {useTranslation} from 'react-i18next';
 10import {useHistory} from 'react-router-dom';
 11import {useAuth} from 'strapi-react-context';
 12import EventMenu from '../EventMenu';
 13import EventDetails from '../EventDetails';
 14
 15const EventBar = ({event, isEditing, setIsEditing, onAdd, onSave, onShare}) => {
 16  const {t} = useTranslation();
 17  const history = useHistory();
 18  const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
 19  const [anchorEl, setAnchorEl] = useState(null);
 20  const classes = useStyles({detailsOpen});
 21  const {token} = useAuth();
 22
 23  useEffect(() => {
 24    if (!detailsOpen) setIsEditing(false);
 25  }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 26
 27  const signUp = () =>
 28    history.push({
 29      pathname: '/register',
 30      state: {event: event?.id},
 31    });
 32  const signIn = () => history.push('/login');
 33  const goToDashboard = () => history.push('/dashboard');
 34  const goProfile = () => history.push('/profile');
 35
 36  const noUserMenuActions = [
 37    {
 38      label: t('event.actions.add_to_my_events'),
 39      onClick: () => {
 40        onAdd(true);
 41      },
 42      id: 'AddToMyEventsTab',
 43    },
 44    {
 45      label: t('menu.login'),
 46      onClick: signIn,
 47      id: 'SignInTab',
 48    },
 49    {
 50      label: t('menu.register'),
 51      onClick: signUp,
 52      id: 'SignUpTab',
 53    },
 54  ];
 55
 56  const loggedMenuActions = [
 57    {
 58      label: t('menu.dashboard'),
 59      onClick: goToDashboard,
 60      id: 'GoToDashboardTab',
 61    },
 62    {
 63      label: t('menu.profile'),
 64      onClick: goProfile,
 65      id: 'ProfileTab',
 66    },
 67  ];
 68
 69  const menuActions = token ? loggedMenuActions : noUserMenuActions;
 70
 71  return (
 72    <AppBar
 73      position="static"
 74      color="primary"
 75      className={classes.appbar}
 76      id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
 77    >
 78      <Toolbar>
 79        <div className={classes.name}>
 80          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 81            {event.name}
 82          </Typography>
 83          {detailsOpen && (
 84            <IconButton
 85              color="inherit"
 86              edge="end"
 87              id="HeaderAction"
 88              onClick={isEditing ? onSave : () => setIsEditing(true)}
 89            >
 90              <Icon>{isEditing ? 'done' : 'edit'}</Icon>
 91            </IconButton>
 92          )}
 93        </div>
 94        {detailsOpen ? (
 95          <IconButton
 96            color="inherit"
 97            edge="end"
 98            id="CloseDetailsBtn"
 99            onClick={() => {
100              setIsEditing(false);
101              toggleDetails();
102            }}
103          >
104            <Icon>close</Icon>
105          </IconButton>
106        ) : (
107          <>
108            <IconButton
109              color="inherit"
110              edge="end"
111              id="ShareBtn"
112              onClick={onShare}
113              className={classes.shareIcon}
114            >
115              <Icon>share</Icon>
116            </IconButton>
117            <IconButton
118              color="inherit"
119              edge="end"
120              id="MenuMoreInfo"
121              onClick={e => setAnchorEl(e.currentTarget)}
122            >
123              <Icon>more_vert</Icon>
124            </IconButton>
125          </>
126        )}
127        <EventMenu
128          anchorEl={anchorEl}
129          setAnchorEl={setAnchorEl}
130          actions={[
131            ...[
132              {
133                label: detailsOpen
134                  ? t('event.actions.hide_details')
135                  : t('event.actions.show_details'),
136                onClick: toggleDetails,
137                id: 'DetailsTab',
138              },
139            ],
140            ...menuActions,
141          ]}
142        />
143      </Toolbar>
144      {detailsOpen && (
145        <Container className={classes.container} maxWidth="sm">
146          <EventDetails toggleDetails={toggleDetails} />
147        </Container>
148      )}
149    </AppBar>
150  );
151};
152
153const useStyles = makeStyles(theme => ({
154  container: {
155    padding: theme.spacing(2),
156  },
157  appbar: ({detailsOpen}) => ({
158    overflow: 'hidden',
159    height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
160    overflowY: detailsOpen ? 'scroll' : 'hidden',
161    transition: 'height 0.3s ease',
162    zIndex: theme.zIndex.appBar,
163    position: 'fixed',
164    top: 0,
165  }),
166  name: {
167    flexGrow: 1,
168    display: 'flex',
169    alignItems: 'center',
170  },
171  shareIcon: {
172    marginRight: theme.spacing(0),
173  },
174}));
175
176export default EventBar;