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