text: import React from 'react';
  //import { fade, makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import InputBase from '@material-ui/core/InputBase';
  //import MenuIcon from '@material-ui/icons/Menu';
  import SearchIcon from '@material-ui/icons/Search';
  import MoreIcon from '@material-ui/icons/MoreVert';
  import Menu from './menuDrawer';
  //custom
  import Logo from './logo';
  import ProfileInfo from './profileInfo';
  
  // const useStyles = makeStyles(theme => ({
  //   grow: {
  //     flexGrow: 1,
  //   },
  //   menuButton: {
  //     marginRight: theme.spacing(2),
  //   },
  //   title: {
  //     display: 'none',
  //     [theme.breakpoints.up('sm')]: {
  //       display: 'block',
  //       color: theme.palette.text.variant1,
  //       fontSize: "1.2rem",
  //       borderLeft:"1px gray solid",
  //       paddingLeft:"15px"
  //     }  
  //   },
  //   search: {
  //     position: 'relative',
  //     borderRadius: theme.shape.borderRadius,
  //     backgroundColor: fade(theme.palette.common.white, 0.15),
  //     '&:hover': {
  //       backgroundColor: fade(theme.palette.common.white, 0.25),
  //     },
  //     marginRight: theme.spacing(2),
  //     marginLeft: 0,
  //     width: '100%',
  //     [theme.breakpoints.up('sm')]: {
  //       marginLeft: theme.spacing(3),
  //       width: 'auto',
  //     },
  //   },
  //   searchIcon: {
  //     width: theme.spacing(7),
  //     height: '100%',
  //     position: 'absolute',
  //     pointerEvents: 'none',
  //     display: 'flex',
  //     alignItems: 'center',
  //     justifyContent: 'center',
  //   },
  //   inputRoot: {
  //     color: 'inherit',
  //   },
  //   inputInput: {
  //     padding: theme.spacing(1, 1, 1, 7),
  //     transition: theme.transitions.create('width'),
  //     width: '100%',
  //     [theme.breakpoints.up('md')]: {
  //       width: 200,
  //     },
  //   },
  //   sectionDesktop: {
  //     display: 'none',
  //     [theme.breakpoints.up('md')]: {
  //       display: 'flex',
  //     },
  //   },
  //   sectionMobile: {
  //     display: 'flex',
  //     [theme.breakpoints.up('md')]: {
  //       display: 'none',
  //     },
  //   }
  // }));
  
  const PrimarySearchAppBar = ({siteTitle}) => {
    //const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
  
    //const isMenuOpen = Boolean(anchorEl);
    //const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
  
    const handleProfileMenuOpen = event => {
      setAnchorEl(event.currentTarget);
    };
  
    // const handleMobileMenuClose = () => {
    //   setMobileMoreAnchorEl(null);
    // };
  
    // const handleMenuClose = () => {
    //   setAnchorEl(null);
    //   handleMobileMenuClose();
    // };
  
    const handleMobileMenuOpen = event => {
      setMobileMoreAnchorEl(event.currentTarget);
    };
  
    const menuId = 'primary-search-account-menu';
    // const renderMenu = (
    //   <Menu
    //     anchorEl={anchorEl}
    //     anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
    //     id={menuId}
    //     keepMounted
    //     transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    //     open={isMenuOpen}
    //     onClose={handleMenuClose}
    //   >
    //     <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
    //     <MenuItem onClick={handleMenuClose}>My account</MenuItem>
    //   </Menu>
    // );
  
    const mobileMenuId = 'primary-search-account-menu-mobile';
    // const renderMobileMenu = (
    //   <Menu
    //     anchorEl={mobileMoreAnchorEl}
    //     anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
    //     id={mobileMenuId}
    //     keepMounted
    //     transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    //     open={isMobileMenuOpen}
    //     onClose={handleMobileMenuClose}
    //   >
    //     {/* <MenuItem>
    //       <IconButton aria-label="show 4 new mails" color="inherit">
    //         <Badge badgeContent={4} color="secondary">
    //           <MailIcon />
    //         </Badge>
    //       </IconButton>
    //       <p>Messages</p>
    //     </MenuItem>
    //     <MenuItem>
    //       <IconButton aria-label="show 11 new notifications" color="inherit">
    //         <Badge badgeContent={11} color="secondary">
    //           <NotificationsIcon />
    //         </Badge>
    //       </IconButton>
    //       <p>Notifications</p>
    //     </MenuItem> */}
    //     <MenuItem onClick={handleProfileMenuOpen}>
    //       <IconButton
    //         aria-label="account of current user"
    //         aria-controls="primary-search-account-menu"
    //         aria-haspopup="true"
    //         color="inherit"
    //       >
    //         <AccountCircle />
    //       </IconButton>
    //       <p>Profile</p>
    //     </MenuItem>
    //   </Menu>
    // );
  
    // return (
    //   <div className={classes.grow}>
    //     <AppBar position="static" className={classes.AppBar} data-test='AppBar'>
    //       <Toolbar>
    //         <IconButton
    //           edge="start"
    //           className={classes.menuButton}
    //           color="inherit"
    //           aria-label="open drawer"
    //         >
    //           <MenuIcon />
    //         </IconButton>
    //         <Logo/>
    //         <Typography className={classes.title} variant="h6" noWrap>
    //           Enterprise Notification Application
    //         </Typography>
    //         <div className={classes.grow} />
    //         <div className={classes.search}>
    //           <div className={classes.searchIcon}>
    //             <SearchIcon />
    //           </div>
    //           <InputBase
    //             placeholder="Search…"
    //             classes={{
    //               root: classes.inputRoot,
    //               input: classes.inputInput,
    //             }}
    //             inputProps={{ 'aria-label': 'search' }}
    //           />
    //         </div>
    //         <div className={classes.sectionDesktop}>
    //           <ProfileInfo menuId = {menuId} handleProfileMenuOpen = {handleProfileMenuOpen}/>
    //         </div>
    //         <div className={classes.sectionMobile}>
    //           <IconButton
    //             aria-label="show more"
    //             aria-controls={mobileMenuId}
    //             aria-haspopup="true"
    //             onClick={handleMobileMenuOpen}
    //             color="inherit"
    //           >
    //             <MoreIcon />
    //           </IconButton>
    //         </div>
    //       </Toolbar>
    //     </AppBar>
    //     {renderMobileMenu}
    //     {renderMenu}
    //   </div>
    // );
    return(
      <AppBar position="static" className="AppBar" data-test='AppBar'>
          <Toolbar>
            {/* <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="open drawer"
            >
              <MenuIcon />
            </IconButton> */}
            <Menu/>
            <Logo/>
            <Typography className="title"  variant="h6" noWrap>
              {siteTitle}
            </Typography>
            <div className='grow' />
            {/* <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'search' }}
              />
            </div> */}
            <div className='sectionDesktop'>
              <ProfileInfo menuId = {menuId} handleProfileMenuOpen = {handleProfileMenuOpen}/>
            </div>
            <div className='sectionMobile'>
              <IconButton
                aria-label="show more"
                aria-controls={mobileMenuId}
                aria-haspopup="true"
                onClick={handleMobileMenuOpen}
                color="inherit"
              >
                <MoreIcon />
              </IconButton>
            </div>
          </Toolbar>
        </AppBar>
    );
  }
  
  export default PrimarySearchAppBar
  