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