import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import AppBar from '@mui/material/AppBar';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import logo from './assets/logo.png';
import styles from './AppBar.module.css';
import { Stack, CssBaseline } from '@mui/material';
import { useCookies } from 'react-cookie';
import { useNavigate } from "react-router-dom";

export default function () {
    const avatarUrl = useSelector(state => state.user.avatarUrl);
    const nickName = useSelector(state => state.user.nickName);
    const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
    const navigate = useNavigate();
    const [anchorElUser, setAnchorElUser] = React.useState(null);
    const handleOpenUserMenu = (event) => {
        setAnchorElUser(event.currentTarget);
    };
    const handleCloseUserMenu = () => {
        setAnchorElUser(null);
    };

    const onLogout = () => {
        removeCookie("accessToken");
        handleCloseUserMenu();
        navigate("/login");
    }


    return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky" color='black'>
        <CssBaseline />
        <Container maxWidth={false} >
            <Toolbar disableGutters variant="dense">
                <Stack direction="row" sx={{ flexGrow: 1 }}>
                    <img className={styles.titleIcon} src={logo} />
                    <Typography variant='h6' sx={{ color: "#FFFFFF" }}>纽曼AI语记</Typography>
                </Stack>
                <Box sx={{
                    display: "flex",
                    alignItems: "center",
                }} >
                    <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                        <Avatar alt={nickName} src={avatarUrl} />
                    </IconButton>
                    <Typography sx={{ color: "#FFFFFF", paddingLeft: 2 }}>{nickName}</Typography>
                    <Menu
                        sx={{ mt: '45px' }}
                        id="menu-appbar"
                        anchorEl={anchorElUser}
                        anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        keepMounted
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        open={Boolean(anchorElUser)}
                        onClose={handleCloseUserMenu}
                    >
                        <MenuItem onClick={onLogout}>
                            <Typography textAlign="center">退出</Typography>
                        </MenuItem>

                    </Menu>
                </Box>
            </Toolbar>
        </Container>
    </AppBar>
}