import React, { useState } from 'react'
import { LightModeOutlined, DarkModeOutlined, Menu as MenuIcon, Search, SettingsOutlined, ArrowDropDownOutlined } from '@mui/icons-material'
import FlexBetween from './FlexBetween'
import { useDispatch } from 'react-redux'
import { setMode } from 'state'
import ProfileImg from "assets/admin.jpg"
import { AppBar, Box, Button, IconButton, InputBase, Menu, MenuItem, Toolbar, useTheme } from '@mui/material'



const Navbar = ({user, sidebarOpen, setSidebarOpen,}) => {
    const dispatch = useDispatch();
    const theme = useTheme();
    const [anchorEl, setAnchorEl] = useState(null);
    const isOpen = Boolean(anchorEl);
    const handleClick = (ev) => setAnchorEl(ev.currentTarget);
    const handleClose = () => setAnchorEl(null)


  return (
    <AppBar sx={{position: "static", background: "none", boxShadow: "none"}}>
        <Toolbar sx={{justifyContent: "space-between"}}>
            {/*Left side*/}
            <FlexBetween>
                <IconButton onClick={() => setSidebarOpen(!sidebarOpen)} >
                    <MenuIcon/>
                </IconButton>
                <FlexBetween backgroundColor={theme.palette.background.alt} borderRadius="10px" gap="3rem" p="0.1rem 1rem">
                    <InputBase placeholder='Search...'/>
                    <IconButton>
                        <Search/>
                    </IconButton>
                </FlexBetween>
            </FlexBetween>
            {/*Right side*/}
            <FlexBetween gap="1rem">
                <IconButton onClick={() => dispatch(setMode())}>
                    {theme.palette.mode === 'dark' ? (
                        <DarkModeOutlined sx={{fontSize: "25px"}}/>
                    ) : (
                        <LightModeOutlined sx={{fontSize: "25px"}}/>
                    )}
                </IconButton>
                <IconButton>
                    <SettingsOutlined sx={{fontSize: "25px"}}/>
                </IconButton>
                <FlexBetween>
                    <Button onClick={handleClick} sx={{display: "flex", justifyContent: "space-between", alignItems: "center", textTransform: "none", gap: "0.5rem"}}>
                        <Box component="img" alt="profile" src={ProfileImg} height="35px" width="35px" borderRadius="50%" sx={{objectFit: "cover"}}/>
                        {/*<Box textAlign="left">
                            <Typography fontWeight="bold" fontSize="0.8rem" sx={{color: theme.palette.secondary[100]}}>
                                {user.name}
                            </Typography>
                        </Box>*/}
                        <ArrowDropDownOutlined sx={{color: theme.palette.secondary[300], fontSize: "25px"}}/>
                    </Button>
                    <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose} anchorOrigin={{ vertical: "bottom", horizontal: "center"}}>
                        <MenuItem onClick={handleClose}>Log Out</MenuItem>
                    </Menu>
                </FlexBetween>
            </FlexBetween>
        </Toolbar>
    </AppBar>
  )
}

export default Navbar