Header.tsx

import {
  AppBar,
  Badge,
  Box,
  Button,
  Grid,
  IconButton,
  makeStyles,
  Tab,
  Tabs,
  Toolbar,
  Typography,
} from '@material-ui/core';
import { ExitToApp, MailOutline, Report } from '@material-ui/icons';
import { isNil } from 'lodash';
import React, { useState } from 'react';
import { useHistory } from 'react-router';
import { useUserContext } from '../hooks/useUserContext';
import SCHBodyIcon from '../svg/SCHBodyIcon';

export interface AppBarMenuItem {
  id: number;
  title: string;
  redirectTo: string;
}

export const MENU_ITEMS: AppBarMenuItem[] = [
  {
    id: 0,
    title: 'Hírek',
    redirectTo: '/news',
  },
  {
    id: 1,
    title: 'Rólunk',
    redirectTo: '/about',
  },
  {
    id: 2,
    title: 'Házirend',
    redirectTo: '/rules',
  },
];

const USER_MENU_ITEMS: AppBarMenuItem[] = [
  {
    id: 3,
    title: 'Időszakok',
    redirectTo: '/terms',
  },
];

const ADMIN_MENU_ITEMS: AppBarMenuItem[] = [
  {
    id: 4,
    title: 'Felhasználók',
    redirectTo: '/users',
  },
];

const useStyles = makeStyles((theme) => ({
  appBar: {
    backgroundColor: theme.palette.primary.main,
  },
  tabContainer: {
    flexGrow: 1,
    height: '100%',
  },
  tabs: {
    height: '100%',
    marginRight: `${theme.spacing(1)}px`,
  },
  tab: {
    color: theme.palette.secondary.main,
    fontWeight: 600,
    minWidth: '0px',
  },
  indicator: {
    height: '5px',
    backgroundColor: theme.palette.secondary.main,
  },
  texts: {
    flexShrink: 0,
    marginRight: `${theme.spacing(1)}px`,
    marginLeft: `${theme.spacing(1)}px`,
  },
}));

export type HeaderProps = {
  customToolbar?: React.ReactElement;
  menuItems?: AppBarMenuItem[];
  handleLogout?: () => void;
};

const Header: React.FC<HeaderProps> = ({ customToolbar, handleLogout, menuItems = MENU_ITEMS }) => {
  const classes = useStyles();
  const history = useHistory();
  const { profile } = useUserContext();
  const [value, setValue] = useState(
    menuItems.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
  );

  return (
    <AppBar className={classes.appBar} position="static">
      {customToolbar !== undefined ? (
        customToolbar
      ) : (
        <Toolbar>
          <div>
            <SCHBodyIcon width="64px" height="48px" />
          </div>

          <Grid item className={classes.tabContainer} container justify="flex-end">
            <Tabs
              className={classes.tabs}
              classes={{ flexContainer: classes.tabs }}
              value={value}
              onChange={(event, val): void => {
                setValue(val);
              }}
              TabIndicatorProps={{ className: classes.indicator }}
            >
              {menuItems.map((item) => (
                <Tab
                  key={item.id}
                  className={classes.tab}
                  label={item.title}
                  onClick={(): void => {
                    history.push(item.redirectTo);
                  }}
                />
              ))}
              {!isNil(profile) && (
                <>
                  {USER_MENU_ITEMS.map((item) => (
                    <Tab
                      key={item.id}
                      className={classes.tab}
                      label={item.title}
                      onClick={(): void => {
                        history.push(item.redirectTo);
                      }}
                    />
                  ))}

                  {profile.role === 'ADMIN' && (
                    <>
                      {ADMIN_MENU_ITEMS.map((item) => (
                        <Tab
                          key={item.id}
                          className={classes.tab}
                          label={item.title}
                          onClick={(): void => {
                            history.push(item.redirectTo);
                          }}
                        />
                      ))}
                    </>
                  )}
                </>
              )}
            </Tabs>
          </Grid>

          {!isNil(profile) ? (
            <>
              <IconButton size="medium">
                <Badge
                  badgeContent={profile.notices.filter((item) => !item.isSeen).length}
                  color="error"
                >
                  <MailOutline style={{ color: 'white' }} />
                </Badge>
              </IconButton>

              {profile.warnings.length > 0 && (
                <IconButton size="medium" disableRipple>
                  <Report color="error" />
                </IconButton>
              )}
              <Typography variant="h6" align="center" className={classes.texts}>
                {profile.name}
              </Typography>
              <Box color="secondary.main">
                <IconButton color="inherit" size="medium" onClick={handleLogout}>
                  <ExitToApp />
                </IconButton>
              </Box>
            </>
          ) : (
            <Button color="secondary" variant="contained">
              Belépés
            </Button>
          )}
        </Toolbar>
      )}
    </AppBar>
  );
};

export default Header;