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 MenuItem from '@material-ui/core/MenuItem';
  import Menu from '@material-ui/core/Menu';
  import MenuIcon from '@material-ui/icons/Menu';
  import SearchIcon from '@material-ui/icons/Search';
  import AccountCircle from '@material-ui/icons/AccountCircle';
  
  import Button from "@material-ui/core/Button";
  
  //import { Link } from '@material-ui/core';
  import { Link } from "react-router-dom";
  import { Grid, Container } from '@material-ui/core';
  import {logout} from "../redux/Actions/authActions"
  import { connect } from 'react-redux';
  // import   firebase  from '../Config/fbconfig';
  // import auth from "../Config/fbconfig"
  // import {toast} from "react-toastify"
  
  
  const useStyles = makeStyles((theme) => ({
    grow: {
      flexGrow: 1,
      
       
    },
    appbar:{
      backgroundColor:"#810aff",
      color:"white",
      fontWeight:"bolder"
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    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: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
    sectionDesktop: {
      display: 'none',
      [theme.breakpoints.up('md')]: {
        display: 'flex',
      },
    },
    sectionMobile: {
      display: 'flex',
      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
    navButton:{
      backgroundColor:"gray",
      marginRight:5
    },
  }));
  
   function SignedoutNavBar({logout, history}) {
    const classes = useStyles();
  
    // const [isAuthenticated, setIsAuthenticated] = useState(null)
  
    // useLayoutEffect(() => {
    //   setIsAuthenticated(getAuthenticationStatus())
    // })
  
    // const handleLogout = event => {
    //   event.preventDefault()
    //   logout()
    //   toast.success("Logout successful")
    
    // }
  
    // const [spacing, setSpacing] = React.useState(2);
    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}
      >
           <Link to="/">
              {" "}
              <Button variant="contained" color="primary" className={classes.navButton}>Home</Button>{" "}
            </Link>
           
            <Link to="/login">
              {" "}
              <Button variant="contained" color="primary" className={classes.navButton}>Login</Button>{" "}
            </Link>
            <Link to="/signup">
              {" "}
              <Button variant="contained" color="primary" className={classes.navButton}>Sign up</Button>
            </Link>
            
             
           
            
        <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 (
      <Container fixed>
        <Grid container className={classes.grow} spacing={2}>
        <AppBar position="static" className={classes.appbar}>
          <Toolbar>
          
            <Typography className={classes.title} variant="h6" noWrap>
              Pusher Chat App
            </Typography>
            <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.grow} />
            <div className={classes.sectionDesktop}>
  
            <Link to="/">
              {" "}
              <Button variant="contained" color="primary" className={classes.navButton}>Home</Button>{" "}
            </Link>
                          
            <Link to="/login">
            {" "}
            <Button variant="contained" color="primary" className={classes.navButton}>Login</Button>{" "}
            </Link>
  
            <Link to="/signup">
            {" "}
            <Button variant="contained" color="primary" className={classes.navButton}>Sign up</Button>
            </Link>
           
  
           
             
            </div>
            <div className={classes.sectionMobile}>
            <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="open drawer"
              onClick={handleMobileMenuOpen}
            >
              <MenuIcon />
            </IconButton>
            </div>
          </Toolbar>
        </AppBar>
        {renderMobileMenu}
        {renderMenu}
        </Grid>
        </Container>
    );
  }
  
  // const mapStateToProps = ({currentUser}) => {
  //   return { currentUser }
  // }
  export default connect(null,{logout})(SignedoutNavBar )