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