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            to={''}
 90            onClick={() => {
 91              window.location.href = settings['about_link'];
 92            }}
 93          >
 94            <CarosterLogo className={classes.logo} title="" />
 95          </Link>
 96          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 97            {event.name}
 98          </Typography>
 99          {detailsOpen && (
100            <IconButton
101              color="inherit"
102              edge="end"
103              id="HeaderAction"
104              onClick={isEditing ? onSave : () => setIsEditing(true)}
105            >
106              <Icon>{isEditing ? 'done' : 'edit'}</Icon>
107            </IconButton>
108          )}
109        </div>
110        {detailsOpen ? (
111          <IconButton
112            color="inherit"
113            edge="end"
114            id="CloseDetailsBtn"
115            onClick={() => {
116              setIsEditing(false);
117              toggleDetails();
118            }}
119          >
120            <Icon>close</Icon>
121          </IconButton>
122        ) : (
123          <>
124            <IconButton
125              color="inherit"
126              edge="end"
127              id="ShareBtn"
128              onClick={toggleDetails}
129              className={classes.shareIcon}
130            >
131              <Icon>share</Icon>
132            </IconButton>
133            <IconButton
134              color="inherit"
135              edge="end"
136              id="ShareBtn"
137              onClick={toggleDetails}
138              className={classes.iconButtons}
139            >
140              <Icon>information_outline</Icon>
141            </IconButton>
142            <IconButton
143              color="inherit"
144              edge="end"
145              id="MenuMoreInfo"
146              onClick={e => setAnchorEl(e.currentTarget)}
147            >
148              {authState?.user ? (
149                <Avatar className={classes.avatar}>
150                  {`${authState.user.username[0]}`.toUpperCase()}
151                </Avatar>
152              ) : (
153                <Icon>more_vert</Icon>
154              )}
155            </IconButton>
156          </>
157        )}
158        <EventMenu
159          anchorEl={anchorEl}
160          setAnchorEl={setAnchorEl}
161          actions={[
162            ...userInfos,
163            ...[
164              {
165                label: detailsOpen
166                  ? t('event.actions.hide_details')
167                  : t('event.actions.show_details'),
168                onClick: toggleDetails,
169                id: 'DetailsTab',
170              },
171            ],
172            ...menuActions,
173          ]}
174        />
175      </Toolbar>
176      {detailsOpen && (
177        <Container className={classes.container} maxWidth="sm">
178          <EventDetails toggleDetails={toggleDetails} onShare={onShare} />
179        </Container>
180      )}
181    </AppBar>
182  );
183};
184
185const useStyles = makeStyles(theme => ({
186  container: {
187    padding: theme.spacing(2),
188  },
189  appbar: ({detailsOpen}) => ({
190    overflow: 'hidden',
191    height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
192    overflowY: detailsOpen ? 'scroll' : 'hidden',
193    transition: 'height 0.3s ease',
194    zIndex: theme.zIndex.appBar,
195    position: 'fixed',
196    top: 0,
197  }),
198  logo: {
199    marginRight: theme.spacing(2),
200    width: 32,
201    height: 32,
202  },
203  name: {
204    flexGrow: 1,
205    display: 'flex',
206    alignItems: 'center',
207  },
208  iconButtons: {
209    margin: theme.spacing(0),
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;