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