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

// 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,
  isPasswordExpiry,
  haveOrgPaymentRecord,
  isORGLoggedIn,
  // getUserId
} from "utils/Utils";
import { handleLogoutFunction } from 'auth/index';
import { isGranted, isGrantedAny } from "auth/utils";

// 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 { sysSetting } = useContext(SysContext);
  const { window } = props;
  const [mobileOpen, setMobileOpen] = useState(false);
  const dispatch = useDispatch()
  const navigate = useNavigate()

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

  const handleLogout = async () => {
    await dispatch(handleLogoutFunction());
    //await handleLogoutFunction();

    await navigate('/login');
  };

  const loginContent = (
    isGLDLoggedIn() ?
      <div id="adminContent">
        {isPasswordExpiry() ?
          <div id="passwordExpiryedContent">
            <li>
              <Link className="manageUser" to={'/user/changePassword'}>
                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                  <FormattedMessage id="userChangePassword" />
                </Typography>
              </Link>
            </li>
          </div>
          :
          <div id="adminContentList">
            <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>
            {
              isGrantedAny(["VIEW_PROOF", "MAINTAIN_PROOF"]) ?
                <li>
                  <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Proof</Typography></Link>
                </li>
                : <></>
            }

            {
              isGrantedAny(["MAINTAIN_PROOF", "MAINTAIN_PAYMENT", "MAINTAIN_RECON", "VIEW_DEMANDNOTE", "MAINTAIN_DEMANDNOTE"]) ?
                <li>
                  <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
                  <ul className='dropdown'>
                    {
                      isGranted("MAINTAIN_PROOF") ?
                        <li>
                          <Link className="exportDemandNote" to='/paymentPage/exportGDN' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Export for GDN</Typography></Link>
                        </li>
                        :
                        <></>
                    }

                    {
                      isGranted("MAINTAIN_PAYMENT") ?
                        <li>
                          <Link className="application" to='/application/markAsPaid/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Mark Payment</Typography></Link>
                        </li>
                        :
                        <></>
                    }

                    {
                      isGranted("MAINTAIN_PAYMENT") ?
                        <li>
                          <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link>
                        </li>
                        :
                        <></>
                    }

                    {
                      isGranted("MAINTAIN_RECON") ?
                        <>
                          <li>
                            <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link>
                          </li>
                        </>

                        :
                        <></>
                    }

                    {
                      isGranted("MAINTAIN_DEMANDNOTE") ?
                        <li>
                          <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Create Demand Note</Typography></Link>
                        </li>
                        :
                        <></>
                    }
                    {
                      isGrantedAny(["VIEW_DEMANDNOTE", "MAINTAIN_DEMANDNOTE"]) ?
                        <li>
                          <Link className="demandNote" to='/paymentPage/demandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Demand Note</Typography></Link>
                        </li>
                        :
                        <></>
                    }
                    {
                      isGranted("MAINTAIN_RECON") ?
                        <>
                          <li>
                            <Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link>
                          </li>
                        </>

                        :
                        <></>
                    }
                  </ul>
                </li>
                :
                <></>
            }

            {
              isGrantedAny(["VIEW_USER", "MAINTAIN_USER", "VIEW_ORG", "MAINTAIN_ORG", "VIEW_GROUP", "MAINTAIN_GROUP"]) ?
                <li>
                  <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link>
                  <ul className='dropdown'>
                    {
                      isGrantedAny(["VIEW_USER", "MAINTAIN_USER"]) ?
                        <>
                          <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>
                        </>
                        :
                        <></>
                    }

                    {
                      isGrantedAny(["VIEW_ORG", "MAINTAIN_ORG"]) ?
                        <li>
                          <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Organisation</Typography></Link>
                        </li>
                        :
                        <></>
                    }

                    {
                      isGrantedAny(["VIEW_GROUP", "MAINTAIN_GROUP"]) ?
                        <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: '1vw' }} /></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="manageUser" to={'/user/changePassword'}>
                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                      <FormattedMessage id="userChangePassword" />
                    </Typography>
                  </Link>
                </li>
                {
                  isGranted("MAINTAIN_GAZETTE_ISSUE") ?
                    <>
                      <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>
                    </>
                    :
                    <></>
                }

                {
                  isGranted("MAINTAIN_ANNOUNCEMENT") ?
                    <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>
                    :
                    <></>
                }

                {isGranted("MAINTAIN_EMAIL") ?
                  <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>
                  :
                  <></>
                }

                {
                  isGranted("MAINTAIN_DR") ?
                    <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>
                    :
                    <></>
                }

                {
                  isGranted("MAINTAIN_SETTING") ?
                    <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>
      :
      <div id="individualUserContent">
        {isPasswordExpiry() ?
          <div id="passwordExpiryedContent">
            <li>
              <Link className="manageUser" to={'/user/changePassword'}>
                <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                  <FormattedMessage id="userChangePassword" />
                </Typography>
              </Link>
            </li>
          </div>
          :
          <div id="individualUserContentList">
            <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() ?
                haveOrgPaymentRecord() ?
                  <>
                    <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/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
                    <FormattedMessage id="paymentInfoRecord" />
                  </Typography></Link>
                :
                isORGLoggedIn() ?
                  haveOrgPaymentRecord() ?
                    <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
                      <FormattedMessage id="onlinePaymentHistory" />
                    </Typography></Link>
                    :
                    <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
                      <FormattedMessage id="paymentInfoRecord" />
                    </Typography></Link>
                  :
                  <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={'/user/changePassword'}>
                        <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                          <FormattedMessage id="userChangePassword" />
                        </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>
                      <li>
                        <Link className="manageUser" to={'/user/changePassword'}>
                          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                            <FormattedMessage id="userChangePassword" />
                          </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>
                      <li>
                        <Link className="manageUser" to={'/user/changePassword'}>
                          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                            <FormattedMessage id="userChangePassword" />
                          </Typography>
                        </Link>
                      </li>
                    </ul>
                  </>
              }
            </li>
          </div>
        }
        <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={'/aboutUs'}>
          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
            <FormattedMessage id="aboutUs" />
          </Typography>
        </Link>
      </li>
      <li>
        <Link className="login" to='/login'>
          <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
            <FormattedMessage id="login" />
          </Typography>
        </Link>
      </li>
      {
        sysSetting?.allowRegistration ?
          <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}
                sx={{ width: { xs: '100%', md: '5%' } }}
              >
                <Box mt={0.5} sx={{ flexGrow: 1, 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={{ 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">PNSPS</span>
                    </Stack>
                    <Stack justifyContent="flex-end" alignItems="center">
                      <span style={{color:"#B11B1B",fontWeight:'bold',fontSize:'15px'}}>RESTRICTED</span>
                    </Stack>
                  </Stack>
                </Box>
              </Stack> :
              <Stack
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
                spacing={0}
                sx={{ width: { xs: '100%', md: '25%' } }}
              >
                <Box sx={{ width: '450px', 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 >
                          <span style={{color:"#B11B1B",fontWeight:'bold',fontSize:'15px'}}>RESTRICTED</span>
                        </Grid>
                        :
                        <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;