import Link from 'next/link';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import Avatar from '@material-ui/core/Avatar';
import Icon from '@material-ui/core/Icon';
import {makeStyles} from '@material-ui/core/styles';
import {useState} from 'react';
import {useRouter} from 'next/router';
import {useTranslation} from 'react-i18next';
import useAuthStore from '../../stores/useAuthStore';
import useProfile from '../../hooks/useProfile';
import useShare from '../../hooks/useShare';
import GenericMenu from '../GenericMenu';
const EventBar = ({event, onAdd}) => {
const {t} = useTranslation();
const router = useRouter();
const {share} = useShare();
const [anchorEl, setAnchorEl] = useState(null);
const token = useAuthStore(s => s.token);
const {user} = useProfile();
const classes = useStyles();
const signUp = () =>
router.push({
pathname: '/auth/register',
state: {event: event?.id},
});
const signIn = () => router.push('/auth/login');
const goToDashboard = () => router.push('/dashboard');
const goProfile = () => router.push('/profile');
const noUserMenuActions = [
{
label: t('event.actions.add_to_my_events'),
onClick: () => {
onAdd(true);
},
id: 'AddToMyEventsTab',
},
{divider: true},
{
label: t('menu.login'),
onClick: signIn,
id: 'SignInTab',
},
{
label: t('menu.register'),
onClick: signUp,
id: 'SignUpTab',
},
{divider: true},
];
const loggedMenuActions = [
{
label: t('menu.dashboard'),
onClick: goToDashboard,
id: 'GoToDashboardTab',
},
{
label: t('menu.profile'),
onClick: goProfile,
id: 'ProfileTab',
},
{divider: true},
];
const menuActions = token ? loggedMenuActions : noUserMenuActions;
const userInfos = user
? [{label: user.username, id: 'Email'}, {divider: true}]
: [];
const appLink = user ? '/dashboard' : `/e/${event.uuid}` || '';
const UserIcon = user ? (
{`${user.username[0]}`.toUpperCase()}
) : (
more_vert
);
return (
);
};
const useStyles = makeStyles(theme => ({
appbar: () => ({
overflow: 'hidden',
minHeight: theme.mixins.toolbar.minHeight,
overflowY: 'hidden',
transition: 'height 0.3s ease',
}),
logo: {
marginRight: theme.spacing(2),
width: 64,
height: 32,
cursor: 'pointer',
},
name: {
flexGrow: 1,
display: 'flex',
alignItems: 'center',
},
title: {
maxWidth: `calc(100vw - ${theme.spacing(30)}px)`,
},
iconButtons: {
margin: theme.spacing(0),
},
avatar: {
width: theme.spacing(3),
height: theme.spacing(3),
fontSize: 16,
},
shareIcon: {
marginRight: 0,
},
}));
export default EventBar;