import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import {List as ListIcon} from '@phosphor-icons/react/dist/ssr/List';
// import NotificationsIcon from '@mui/icons-material/Notifications';
import {usePopover} from "../../hooks/usePopover";
import {MobileNav} from "./MobileNav";
import {UserPopover} from "../core/UserPopover";
// import Tooltip from "@mui/material/Tooltip";
// import {Badge} from "@mui/material";
// import {useAlert} from "../../hooks/useAlert";

export function MainNav() {
    const [openNav, setOpenNav] = React.useState(false);
    const userPopover = usePopover();

    return (
        <>
            <Box
                component="header"
                sx={{
                    borderBottom: '1px solid var(--mui-palette-divider)',
                    backgroundColor: 'var(--mui-palette-background-paper)',
                    position: 'sticky',
                    top: 0,
                    zIndex: 'var(--mui-zIndex-appBar)',
                    height: '64px'
                }}
            >
                <Stack direction="row" spacing={3}
                       sx={{alignItems: 'center', justifyContent: 'space-between', minHeight: '64px', px: 2}}>
                    <Stack sx={{alignItems: 'center'}} direction="row" spacing={3}>
                        <IconButton onClick={() => setOpenNav(true)} sx={{display: {xl: 'none'}}}>
                            <ListIcon/>
                        </IconButton>
                    </Stack>
                    <Stack sx={{alignItems: 'center'}} direction="row" spacing={2}>
                        <Avatar onClick={userPopover.handleOpen} ref={userPopover.anchorRef} src="/assets/avatar.png"
                                sx={{cursor: 'pointer'}}/>
                    </Stack>
                </Stack>
            </Box>
            <UserPopover anchorEl={userPopover.anchorRef.current} onClose={userPopover.handleClose}
                         open={userPopover.open}/>
            <MobileNav
                onClose={() => {
                    setOpenNav(false);
                }}
                open={openNav}
            />
        </>
    );
}
