# NavBar.js

import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import CssBaseline from '@mui/material/CssBaseline';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';
import ListSubheader from '@mui/material/ListSubheader';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import Collapse from '@mui/material/Collapse';
//Icon
import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';
import BuildCircleIcon from '@mui/icons-material/BuildCircle';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import CloudCircleIcon from '@mui/icons-material/CloudCircle';
import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
//
import AuthService from './authority/services/auth.service';
import App from './App';
import { Button, Label } from 'reactstrap';
import EventBus from "./authority/common/EventBus";
//
import {
Nav,
NavLink,

} from "reactstrap";
//
const drawerWidth = 240;
//

//
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: `-${drawerWidth}px`,
...(open && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
// marginLeft: "0px",
// marginRight: "0px",
margin: "auto",
}),
}),
);

const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`,
// marginRight: "0px",
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));

const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: 'flex-end',
}));

export default function PersistentDrawerLeft() {
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [nestListOpenSys, setNesyListOpenSys] = React.useState(false);
const [nestListOpenCr, setNesyListOpenCr] = React.useState(false);
const [nestListOpenSt, setNesyListOpenSt] = React.useState(false);
const [nestListOpenDb, setNesyListOpenDb] = React.useState(false);
//
const [currentUser, setCurrentUser] = React.useState(undefined);
const user = AuthService.getCurrentUser();
const [showModeratorBoard, setShowModeratorBoard] = React.useState();
const [showAdminBoard, setShowAdminBoard] = React.useState();

const Check = () => {
if (user) {
setCurrentUser(user);
setShowModeratorBoard(user.roles.includes("ROLE_MODERATOR"));
setShowAdminBoard(user.roles.includes("ROLE_ADMIN"));
// showModeratorBoard: user.roles.includes("ROLE_MODERATOR"),
// showAdminBoard: user.roles.includes("ROLE_ADMIN"),
}
}

//
EventBus.remove("logout");
//
const logOut = () => {
AuthService.logout();
setShowModeratorBoard(false);
setShowAdminBoard(false);
setCurrentUser(undefined);
// this.setState({
// showModeratorBoard: false,
// showAdminBoard: false,
// currentUser: undefined,
// });
}
//
const handleDrawerOpen = () => {
setOpen(true);
};

const handleDrawerClose = () => {
setOpen(false);
};
//模組選單
const handleNestListSys = () => {
setNesyListOpenSys(!nestListOpenSys);
}
const handleNestListCr = () => {
setNesyListOpenCr(!nestListOpenCr);
}
const handleNestListSt = () => {
setNesyListOpenSt(!nestListOpenSt);
}
const handleNestListDb = () => {
setNesyListOpenDb(!nestListOpenDb);
}

return (
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{ mr: 2, ...(open && { display: 'none' }) }}
>
<MenuIcon />
</IconButton>
<Typography variant="h5" noWrap component="div">
{/* <Button> */}
MMIS
{/* </Button> */}
</Typography>
{/* */}
{currentUser ? (
<Nav>
<div className="navbar-nav ml-auto">

<a href="/login" className="nav-link" onClick={logOut}>
LogOut
</a>

</div>
<div className="navbar-nav ml-auto">

<label >{currentUser.roles}</label>
</div>

{/* <NavItem>{currentUser.roles}</NavItem> */}

</Nav>
) : (

<Nav>
<NavLink href="/login">登入</NavLink>

<NavLink href="/register">註冊</NavLink>
</Nav>

)}
{/* */}
</Toolbar>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="persistent"
anchor="left"
open={open}
color={"red"}
>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</DrawerHeader>
<ListSubheader component="div" id="nested-list-subheader">
主頁
</ListSubheader>
<Divider />
<List>
{/* {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))} */}
<ListItemButton onClick={() => {
window.location.href = "/";
}}>
<ListItem disablePadding>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText primary={"主頁"} />
</ListItem >
</ListItemButton>
<ListSubheader component="div" id="nested-list-subheader">
模組
</ListSubheader>
<Divider />
<ListItem disablePadding>
<ListItemButton onClick={handleNestListSys} >
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary={"系統模組"} />
{nestListOpenSys ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
</ListItem>
<Collapse in={nestListOpenSys}>
<List>
<ListItem>
<ListItemButton onClick={() => {
window.location.href = "/majorRoute";
}}>
<ListItem disablePadding>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"大路線"} />
</ListItem >
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton onClick={() => {
window.location.href = "/middleRoute";
}}>
<ListItem disablePadding>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"中路線"} />
</ListItem >
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton onClick={() => {
window.location.href = "/smallRoute";
}}>
<ListItem disablePadding>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"小路線"} />
</ListItem >
</ListItemButton>
</ListItem>
</List>
</Collapse>
<ListItem disablePadding>
<ListItemButton onClick={handleNestListCr} >
<ListItemIcon>
<AddCircleIcon />
</ListItemIcon>
<ListItemText primary={"進貨模組"} />
{nestListOpenCr ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
</ListItem>
<Collapse in={nestListOpenCr}>
<List>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/suppliers";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"供應商"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/supplierType";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"供應商類型"} />
</ListItemButton>
</ListItem>

</List>
</Collapse>
<ListItem disablePadding>
<ListItemButton onClick={handleNestListSt} >
<ListItemIcon>
<CloudCircleIcon />
</ListItemIcon>
<ListItemText primary={"存貨模組"} />
{nestListOpenSt ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
</ListItem>
<Collapse in={nestListOpenSt}>
<List>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/products";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"商品"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/uoms";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"計量單位"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/categories";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"大分類"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/types";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"中分類"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/subGroups";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"小分類"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/dcSites";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"物流中心"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/dcWhBuildings";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"物流中心建物"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/warehouses";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"物流中心倉庫"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/searchDc";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"物流中心庫區"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/characteristics";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"倉庫屬性"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/stocktakings";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"盤點週期"} />
</ListItemButton>
</ListItem>

</List>
</Collapse>
<ListItem disablePadding>
<ListItemButton onClick={handleNestListDb} >
<ListItemIcon>
<RemoveCircleIcon />
</ListItemIcon>
<ListItemText primary={"出貨模組"} />
{nestListOpenDb ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
</ListItem>
<Collapse in={nestListOpenDb}>
<List>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/owners";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"貨主"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/customers";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"配送客戶"} />
</ListItemButton>
</ListItem>
<ListItem >
<ListItemButton disablePadding onClick={() => {
window.location.href = "/categories";
}}>
<ListItemIcon>
<BuildCircleIcon />
</ListItemIcon>
<ListItemText primary={"大分類"} />
</ListItemButton>
</ListItem>

</List>
</Collapse>
</List>
</Drawer>
<Main open={open}>
<DrawerHeader />
<App />
</Main>
</Box>
);
}