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