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    {divider: true},
 45    {
 46      label: t('menu.login'),
 47      onClick: signIn,
 48      id: 'SignInTab',
 49    },
 50    {
 51      label: t('menu.register'),
 52      onClick: signUp,
 53      id: 'SignUpTab',
 54    },
 55  ];
 56
 57  const loggedMenuActions = [
 58    {
 59      label: t('menu.dashboard'),
 60      onClick: goToDashboard,
 61      id: 'GoToDashboardTab',
 62    },
 63    {
 64      label: t('menu.profile'),
 65      onClick: goProfile,
 66      id: 'ProfileTab',
 67    },
 68    {divider: true},
 69  ];
 70
 71  const menuActions = token ? loggedMenuActions : noUserMenuActions;
 72
 73  return (
 74    <AppBar
 75      position="static"
 76      color="primary"
 77      className={classes.appbar}
 78      id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
 79    >
 80      <Toolbar>
 81        <div className={classes.name}>
 82          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 83            {event.name}
 84          </Typography>
 85          {detailsOpen && (
 86            <IconButton
 87              color="inherit"
 88              edge="end"
 89              id="HeaderAction"
 90              onClick={isEditing ? onSave : () => setIsEditing(true)}
 91            >
 92              <Icon>{isEditing ? 'done' : 'edit'}</Icon>
 93            </IconButton>
 94          )}
 95        </div>
 96        {detailsOpen ? (
 97          <IconButton
 98            color="inherit"
 99            edge="end"
100            id="CloseDetailsBtn"
101            onClick={() => {
102              setIsEditing(false);
103              toggleDetails();
104            }}
105          >
106            <Icon>close</Icon>
107          </IconButton>
108        ) : (
109          <>
110            <IconButton
111              color="inherit"
112              edge="end"
113              id="ShareBtn"
114              onClick={onShare}
115              className={classes.shareIcon}
116            >
117              <Icon>share</Icon>
118            </IconButton>
119            <IconButton
120              color="inherit"
121              edge="end"
122              id="MenuMoreInfo"
123              onClick={e => setAnchorEl(e.currentTarget)}
124            >
125              <Icon>more_vert</Icon>
126            </IconButton>
127          </>
128        )}
129        <EventMenu
130          anchorEl={anchorEl}
131          setAnchorEl={setAnchorEl}
132          actions={[
133            {
134              label: detailsOpen
135                ? t('event.actions.hide_details')
136                : t('event.actions.show_details'),
137              onClick: toggleDetails,
138              id: 'DetailsTab',
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  withDivider: {
175    borderBottom: `1px solid ${theme.palette.divider}`,
176  },
177}));
178
179export default EventBar;