PNSPS-frontend-MaterialUI/src/layout/MainLayout/Header/index.js

import PropTypes from 'prop-types';
import React
, { useState }
  from 'react';
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

// material-ui
// import { useTheme } from '@mui/material/styles';
import {
  AppBar,
  // Container,
  Typography,
  Box,
  Stack,
  // IconButton,
  // Menu,
  // MenuItem,
  // Button,
  // Tooltip,
  // Avatar,
  // Stack,
  Toolbar,
  Divider,
  // List,
  // ListItem,
  // ListItemButton,
  // ListItemText,
  IconButton,
  Drawer, Grid,
  //  useMediaQuery
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

// project import
// import AppBarStyled from './AppBarStyled';
// import HeaderContent from './HeaderContent';
import Logo from 'components/Logo';
import AdminLogo from 'components/AdminLogo';
import MobileLogo from 'components/MobileLogo';
//import Profile from './HeaderContent/Profile';
import "assets/style/navbarStyles.css";
import { 
  isUserLoggedIn, 
  isGLDLoggedIn, 
  isPrimaryLoggedIn, 
  isCreditorLoggedIn,
  isINDLoggedIn,
  // isORGLoggedIn,
  // getUserId
} from "utils/Utils";
import { handleLogoutFunction } from 'auth/index';

// assets
// import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons';
// import { AppBar } from '../../../../node_modules/@mui/material/index';
import { Link } from "react-router-dom";
import LocaleSelector from "./HeaderContent/LocaleSelector";
import { FormattedMessage } from "react-intl";

const drawerWidth = 300;

// const navItems = ['Home', 'About', 'Contact'];
// ==============================|| MAIN LAYOUT - HEADER ||============================== //

function Header(props) {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = useState(false);
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const handleDrawerToggle = () => {
    setMobileOpen((prevState) => !prevState);
  };

  const handleLogout = async () => {
    dispatch(handleLogoutFunction());
    //await handleLogoutFunction();
    navigate('/login');
  };

  const loginContent = (
    isGLDLoggedIn() ?
      <div id="adminContent">
        <li>
          <Link className="dashboard" to='/dashboard'>
            <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >
              Dashboard
            </Typography>
          </Link>
        </li>
        <li>
          <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
        </li>
        <li>
          <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Proof</Typography></Link>
        </li>
        <li>
          <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
          <ul className='dropdown'>
            <li>
              <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link>
            </li>
            <li>
              <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link>
            </li>
            <li>
              <Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link>
            </li>
            <li>
              <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Create Demand Note</Typography></Link>
            </li>
            <li>
              <Link className="demandNote" to='/paymentPage/demandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Demand Note</Typography></Link>
            </li>
          </ul>
        </li>
        <li>
          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
          <ul className='dropdown'>
            <li>
              <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (GLD)</Typography></Link>
            </li>
            <li>
              <Link className="indUser" to='/indUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (Individual)</Typography></Link>
            </li>
            <li>
              <Link className="orgUser" to='/orgUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (Organisation)</Typography></Link>
            </li>
            <li>
              <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Organisation</Typography></Link>
            </li>
            <li>
              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>User Group</Typography></Link>
            </li>

          </ul>
        </li>
        <li>
          <Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link>
          <ul className='dropdown'>
            <li>
              <Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>My Profile</Typography></Link>
            </li>
            <li>
              <Link className="holidaySetting" to='/setting/holiday'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Holiday Settings</Typography></Link>
            </li>
            <li>
              <Link className="gazetteissueSetting" to='/setting/gazetteissuepage'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Gazette Issues</Typography></Link>
            </li>
            <li>
              <Link className="announcement" to='/setting/announcement'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Announcement</Typography></Link>
            </li>
            <li>
              <Link className="emailTemplate" to='/setting/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Email Template</Typography></Link>
            </li>
            <li>
              <Link className="drImport" to='/setting/drImport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>DR Import</Typography></Link>
            </li>
            <li>
              <Link className="systemSetting" to='/setting/sys'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>System Settings</Typography></Link>
            </li>
            <li>
              <Link className="auditLogSetting" to='/setting/auditLog'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Audit Log</Typography></Link>
            </li>
          </ul>
        </li>
        <Box sx={{display: {xs: 'none', sm: 'none', md: 'block'}}}>
          <li>
            <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Logout</Typography></Link>
          </li>
        </Box>
      </div>
      :
      <div id="individualUserContent">
        <li>
          <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
            <FormattedMessage id="mainPage" />
          </Typography></Link>
        </li>
        <li>
          <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
            <FormattedMessage id="myPublicNotice" />
          </Typography></Link>
        </li>
        <li>
          <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
            <FormattedMessage id="proofRecord" />
          </Typography></Link>
        </li>
        <li>
          {isCreditorLoggedIn() ?
            <>
              <Link className="paymentRecord">
                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
                  <FormattedMessage id="paymentHistory"/>
                </Typography>
                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
              </Link>
              <ul className='dropdown'>
                <li>
                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
                    <FormattedMessage id="onlinePaymentHistory" />
                  </Typography></Link>
                </li>
                <li>
                  <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
                    <FormattedMessage id="paymentInfoRecord" />
                  </Typography></Link>
                </li>
              </ul>
            </>
            :
            <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
              <FormattedMessage id="onlinePaymentHistory" />
            </Typography></Link>
          }
        </li>
        <li>

          {isPrimaryLoggedIn() ?
            <>
              <Link className="userSetting" >
                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
                  <FormattedMessage id="setting" />
                </Typography>
                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
              </Link>
              <ul className='dropdown' style={{ width: "max-content" }}>
                <li>
                  <Link className="manageOrgUser" to='setting/manageUser'>
                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                      <FormattedMessage id="companyOrUserRecord" />
                    </Typography>
                  </Link>
                </li>
                <li>
                  <Link className="manageUser" to={'/orgUser'}>
                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                      {/* <FormattedMessage id="companyOrUserRecord" /> */}
                      <FormattedMessage id="userProfile" />
                    </Typography>
                  </Link>
                </li>
                <li>
                  <Link className="manageUser" to={'/org'}>
                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                      {/* <FormattedMessage id="companyOrUserRecord" /> */}
                      <FormattedMessage id="organizationProfile" />
                    </Typography>
                  </Link>
                </li>
              </ul>
            </>
            :
            isINDLoggedIn()?
            <>
              <Link className="userSetting" >
                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
                  <FormattedMessage id="setting" />
                </Typography>
                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
              </Link>
              <ul className='dropdown' style={{ width: "max-content" }}>
                <li>
                  <Link className="manageUser" to={'/indUser'}>
                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                      {/* <FormattedMessage id="companyOrUserRecord" /> */}
                      <FormattedMessage id="userProfile" />
                    </Typography>
                  </Link>
                </li>
              </ul>
            </>
            :
            <>
              <Link className="userSetting" >
                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
                  <FormattedMessage id="setting" />
                </Typography>
                <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
              </Link>
              <ul className='dropdown' style={{ width: "max-content" }}>
                <li>
                  <Link className="manageUser" to={'/orgUser'}>
                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                      <FormattedMessage id="userProfile" />
                    </Typography>
                  </Link>
                </li>
              </ul>
            </>
          }
        </li>
        <Box sx={{display: {xs: 'none', sm: 'none', md: 'block'}}}>
          <li>
            <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
              <FormattedMessage id="logout" />
            </Typography></Link>
          </li>
        </Box>
      </div>
  );

  const logoutContent = (
    <div>
      <li>
        <Link className="login" to='/login'>
          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
            <FormattedMessage id="login" />
          </Typography>
        </Link>
      </li>
      <li>
        <Link className="register" to='/register'>
          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
            <FormattedMessage id="register" />
          </Typography>
        </Link>
      </li>
    </div>
  );

  const drawer = (
    isUserLoggedIn() ?
      <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" /*onClick={handleDrawerToggle}*/ sx={{ textAlign: 'center', width: '300px' }}>
        {/* <Typography variant="h6" sx={{ my: 2 }}>
          PNSPS
        </Typography> */}
        <Box sx={{ mr: 2, mt:1, display: { md: 'none' } }}>
          <MobileLogo />
          <span id="mobileTitle" >PNSPS</span>
        </Box>
        <Divider />
        <ul id="sidebartop">
          {loginContent}
        </ul>
        <Divider />
        <ul id="sidebarbottom">
          <li>
            <Link className="logout" onClick={handleLogout}>
              <FormattedMessage id="logout" />
            </Link>
          </li>
        </ul>
      </Stack>
      :
      <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
        <Box sx={{ mr: 2, mt:1, display: { md: 'none' } }}>
          <MobileLogo />
          <span id="mobileTitle" >PNSPS</span>
        </Box>
        <Divider />
        <ul id="logoutContent">
          {logoutContent}
        </ul>
        <Divider />
      </Stack>
  );

  const container = window !== undefined ? () => window().document.body : undefined;
  return (
    isUserLoggedIn() ?
      // User Login success
      <Box>
        <AppBar component="nav">
          <Toolbar id="nav" width="100%">
            {isGLDLoggedIn()
              ? <Stack
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
                spacing={0}
              >
                <Box mt={0.5} sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                  <AdminLogo />
                </Box>
                <IconButton
                  color="inherit"
                  aria-label="open drawer"
                  edge="start"
                  onClick={handleDrawerToggle}
                  sx={{ mr: 2, display: { md: 'none' } }}
                >
                  <MenuIcon style={{ color: '#0C489E' }} />
                </IconButton>
                <Box sx={{ mr: 2, display: { md: 'none' } }}>
                  <MobileLogo />
                  <span id="mobileTitle" >PNSPS</span>
                </Box>
              </Stack> :
              <Stack
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
                spacing={0}
                sx={{width:{xs:'100%',md:'25%'}}}
              >
                <Box sx={{ width: '260px', flexGrow: 1, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                  <Stack direction="row" justifyContent="flex-start" alignItems="center">
                    <Logo />
                    <Stack justifyContent="flex-start" alignItems="center">
                      {/*<span id="systemTitle">公共啟事提交</span>*/}
                      {/*<span id="systemTitle">及繳費系統</span>*/}
                      <span id="systemTitle">
                        <FormattedMessage id="PNSPS" />
                      </span>
                    </Stack>
                  </Stack>
                </Box>
                <IconButton
                  color="inherit"
                  aria-label="open drawer"
                  edge="start"
                  onClick={handleDrawerToggle}
                  sx={{ mr: 2, display: { md: 'none' } }}
                >
                  <MenuIcon style={{ color: '#0C489E' }} />
                </IconButton>
                <Box sx={{ flexGrow: 1, mr: 2, display: { sm: 'block', md: 'none' } }}>
                  <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                    <MobileLogo />
                    <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
                      <span id="mobileTitle">
                        <FormattedMessage id="PNSPS" />
                      </span>
                    </Stack>

                    <Stack justifyContent="flex-end" alignItems="center">
                      <LocaleSelector />
                    </Stack>
                  </Stack>
                </Box>
              </Stack>
            }

            <Box sx={{ display: { xs: 'none', sm: 'none', md: 'block' }, width: "100%" }}>
              <Stack
                direction="row"
                justifyContent="space-between"
                alignItems="center"
                spacing={1}
              >
                <ul id="navbar" width="100%" >
                  {loginContent}
                </ul>

                <Grid item>
                  <Grid container direction="column" 
                    justifyContent="flex-end" 
                    alignItems="center"
                  >
                    {
                      isGLDLoggedIn() ?
                        <Grid item />
                        :
                        <Grid item>
                          <LocaleSelector />
                        </Grid>
                    }
                    {/*<Profile />*/}
                  </Grid>
                </Grid>
              </Stack>
            </Box>
          </Toolbar>
        </AppBar>
        <Box component="nav">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { sm: 'block', md: 'none' },
              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
            }}
          >
            {drawer}
          </Drawer>
        </Box>
      </Box> :
      <Box>
        <AppBar component="nav">
          <Toolbar id="nav" width="100%">
            <Stack
              direction="row"
              justifyContent="flex-start"
              alignItems="center"
              spacing={0}
              // width="100%"
              sx={{width:{xs:'100%',md:'25%'}}}
            >
              <Box sx={{ flexGrow: 1, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                <Stack direction="row" justifyContent="flex-start" alignItems="center" >
                  <Logo />
                  <Stack justifyContent="flex-start" alignItems="center">
                    <span id="systemTitle">
                      <FormattedMessage id="PNSPS" />
                    </span>
                  </Stack>
                </Stack>
              </Box>
              <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={handleDrawerToggle}
                sx={{ mr: 2, display: { md: 'none' } }}
              >
                <MenuIcon style={{ color: '#0C489E' }} />
              </IconButton>
              <Box sx={{ flexGrow: 1, mr: 2, display: { sm: 'block', md: 'none' } }}>

                <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                  <MobileLogo />
                  <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
                    <span id="mobileTitle">
                      <FormattedMessage id="PNSPS" />
                    </span>
                  </Stack>

                  <Stack justifyContent="flex-end" alignItems="center">
                    <LocaleSelector />
                  </Stack>
                </Stack>
              </Box>
            </Stack>
            <Box sx={{ display: { xs: 'none', sm: 'none', md: 'block' }, width: "75%" }}>
              <Stack
                direction="row"
                justifyContent="space-between"
                alignItems="center"
                spacing={1}
              >
                <ul id="navbar" width="100%" >
                  {logoutContent}
                </ul>
                <LocaleSelector />

                 {/*<Profile />*/}
              </Stack>
            </Box>
          </Toolbar>
        </AppBar>
        <Box component="nav">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { sm: 'block', md: 'none' },
              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
            }}
          >
            {drawer}
          </Drawer>
        </Box>
      </Box>
  );
}
Header.propTypes = {
  /**
   * Injected by the documentation to work in an iframe.
   * You won't need it on your project.
   */
  window: PropTypes.func,
};
export default Header;