text: import React, { useContext } 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 InputBase from "@material-ui/core/InputBase";
  import Badge from "@material-ui/core/Badge";
  import MenuItem from "@material-ui/core/MenuItem";
  import Menu from "@material-ui/core/Menu";
  import SearchIcon from "@material-ui/icons/Search";
  import AccountCircle from "@material-ui/icons/AccountCircle";
  import NotificationsIcon from "@material-ui/icons/Notifications";
  import MoreIcon from "@material-ui/icons/MoreVert";
  import {useAuth} from "../Auth/AuthContext";
  import { Avatar, Typography } from "@material-ui/core";
  import { Redirect, useHistory } from "react-router";
  import firebase from '../../firbase';
  
  const db =firebase.firestore();
  
  
  const useStyles = makeStyles((theme) => ({
    root: {
      backgroundColor: "white",
      borderRadius: "2px",
      borderBottom: "1px solid #dadce0",
      // height: "1"
    },
    grow: {
      flexGrow: 1
    },
    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"
      },
      border: "0.5px solid #e1e9f5"
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: "100%",
      position: "absolute",
      pointerEvents: "none",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: "#e1e9f5"
    },
    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"
      },
      minWidth: "250px",
      color: "black"
    },
    sectionDesktop: {
      display: "none",
      [theme.breakpoints.up("md")]: {
        display: "flex"
      }
    },
    sectionMobile: {
      display: "flex",
      [theme.breakpoints.up("md")]: {
        display: "none"
      }
    },
    notificationsIcon: {
      color: "black"
    }
  }));
  
  
  
  export default function SearchBar() {
    const [text,setText] = React.useState("");
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
    const [invites,setInvites] = React.useState([]);
  
    const {logOut,currentUser}  = useAuth();
    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
    const history = useHistory();
    // console.log(holidays);
    const handleProfileMenuOpen = (event) => {
      setAnchorEl(event.currentTarget);
      // console.log(currentUser);
    };
    const handleMobileMenuClose = () => {
      setMobileMoreAnchorEl(null);
    };
  
    const handleMenuClose = () => {
      setAnchorEl(null);
      handleMobileMenuClose();
    };
  
    const handleMobileMenuOpen = (event) => {
      setMobileMoreAnchorEl(event.currentTarget);
    };
  
    const handleLogOut = () => {
      logOut();
      history.push("/");
    }
  
    const handleSearch = (e) => {
      if (e.key === 'Enter') {
        console.log('Enter key pressed');
        if(text!==""){
        history.push("/search?q=" + text);
        }
      }
    }
  
    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={handleLogOut}>Log Out</MenuItem>
        {/* <MenuItem onClick={handleMenuClose}>My account</MenuItem> */}
      </Menu>
    );
  
    React.useEffect(() => {
      db.collection('users').doc(currentUser.uid).onSnapshot((doc) => {
          if(doc.exists){
              setInvites(doc.data().invitations);
          }
      })
  },[currentUser])
  
    function setSearchValue(e){
      setText(e.target.value);
    }
    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 new notifications" color="inherit">
            <Badge badgeContent={typeof invites!=="undefined" && invites.length>0 ? invites.length : "0" } color="secondary">
              <NotificationsIcon
                style={{ color: "black"}}
              />
            </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"
            style={{borderRadius:"10%"}}
          >
          <Avatar alt="profile pic" src={currentUser.photoURL}/>
          <p style={{marginLeft:"2px",fontSize:"1rem"}}>{currentUser.displayName}</p>
          </IconButton>
        </MenuItem>
      </Menu>
    );
    return (
      <div className={classes.grow}>
        <AppBar position="static" className={classes.root}>
          <Toolbar>
            <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput
                }}
                inputProps={{ "aria-label": "search" }}
                value = {text}
                onChange = {setSearchValue}
                onKeyPress={handleSearch}
              />
            </div>
            <div className={classes.grow} />
            <div className={classes.sectionDesktop}>
              <IconButton color="inherit" onClick={()=> history.push("/notifications")} >
                <Badge badgeContent={typeof invites!=="undefined" && invites.length>0 ? invites.length : "0" } color="secondary">
                  <NotificationsIcon style={{ color: "black" }} />
                </Badge>
              </IconButton>
              <IconButton
                edge="end"
                aria-label="account of current user"
                aria-controls={menuId}
                aria-haspopup="true"
                onClick={handleProfileMenuOpen}
                style={{borderRadius:"10%"}}
              //   color="inherit"
              >
                <Avatar alt="profile pic" src={currentUser.photoURL}/>
                <p style={{marginLeft:"2px",fontSize:"1rem"}}>{currentUser.displayName}</p>
              </IconButton>
            </div>
            <div className={classes.sectionMobile}>
              <IconButton
                aria-label="show more"
                aria-controls={mobileMenuId}
                aria-haspopup="true"
                onClick={handleMobileMenuOpen}
                color="inherit"
              >
                <MoreIcon style={{ color: "black"}}/>
              </IconButton>
            </div>
          </Toolbar>
        </AppBar>
        {renderMobileMenu}
        {renderMenu}
      </div>
    );
  }
  