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 Avatar from '@material-ui/core/Avatar';
  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 {useRouter} from 'next/router';
 11import Link from 'next/link';
 12import EventMenu from '../EventMenu';
 13import EventDetails from '../EventDetails';
 14import useAuthStore from '../../stores/useAuthStore';
 15import useEventStore from '../../stores/useEventStore';
 16import useProfile from '../../hooks/useProfile';
 17import useSettings from '../../hooks/useSettings';
 18
 19const EventBar = ({event, onAdd, onSave, onShare}) => {
 20  const {t} = useTranslation();
 21  const router = useRouter();
 22  const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
 23  const [anchorEl, setAnchorEl] = useState(null);
 24  const isEditing = useEventStore(s => s.isEditing);
 25  const setIsEditing = useEventStore(s => s.setIsEditing);
 26  const classes = useStyles({detailsOpen});
 27  const token = useAuthStore(s => s.token);
 28  const {user} = useProfile();
 29  const settings = useSettings();
 30
 31  useEffect(() => {
 32    if (!detailsOpen) setIsEditing(false);
 33  }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 34
 35  const signUp = () =>
 36    router.push({
 37      pathname: '/auth/register',
 38      state: {event: event?.id},
 39    });
 40  const signIn = () => router.push('/auth/login');
 41  const goToDashboard = () => router.push('/dashboard');
 42  const goProfile = () => router.push('/profile');
 43
 44  const noUserMenuActions = [
 45    {
 46      label: t('event.actions.add_to_my_events'),
 47      onClick: () => {
 48        onAdd(true);
 49      },
 50      id: 'AddToMyEventsTab',
 51    },
 52    {divider: true},
 53    {
 54      label: t('menu.login'),
 55      onClick: signIn,
 56      id: 'SignInTab',
 57    },
 58    {
 59      label: t('menu.register'),
 60      onClick: signUp,
 61      id: 'SignUpTab',
 62    },
 63  ];
 64
 65  const loggedMenuActions = [
 66    {
 67      label: t('menu.dashboard'),
 68      onClick: goToDashboard,
 69      id: 'GoToDashboardTab',
 70    },
 71    {
 72      label: t('menu.profile'),
 73      onClick: goProfile,
 74      id: 'ProfileTab',
 75    },
 76    {divider: true},
 77  ];
 78
 79  const menuActions = token ? loggedMenuActions : noUserMenuActions;
 80  const userInfos = user
 81    ? [{label: user.username, id: 'Email'}, {divider: true}]
 82    : [];
 83
 84  return (
 85    <AppBar
 86      position="static"
 87      color="primary"
 88      className={classes.appbar}
 89      id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
 90    >
 91      <Toolbar>
 92        <div className={classes.name}>
 93          <Link href={settings?.['about_link'] || ''}>
 94            <img className={classes.logo} src="/assets/logo.svg" alt="Logo" />
 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              {user ? (
149                <Avatar className={classes.avatar}>
150                  {`${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        <EventDetails toggleDetails={toggleDetails} onShare={onShare} />
178      )}
179    </AppBar>
180  );
181};
182
183const useStyles = makeStyles(theme => ({
184  appbar: ({detailsOpen}) => ({
185    overflow: 'hidden',
186    height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
187    overflowY: detailsOpen ? 'scroll' : 'hidden',
188    transition: 'height 0.3s ease',
189    zIndex: theme.zIndex.appBar,
190    position: 'fixed',
191    top: 0,
192  }),
193  logo: {
194    marginRight: theme.spacing(2),
195    width: 32,
196    height: 32,
197    cursor: 'pointer',
198  },
199  name: {
200    flexGrow: 1,
201    display: 'flex',
202    alignItems: 'center',
203  },
204  iconButtons: {
205    margin: theme.spacing(0),
206  },
207  avatar: {
208    width: theme.spacing(3),
209    height: theme.spacing(3),
210    fontSize: 16,
211  },
212  withDivider: {
213    borderBottom: `1px solid ${theme.palette.divider}`,
214  },
215}));
216
217export default EventBar;