import React, { useState } from 'react';
import { useHistory, Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton } from '@mui/material'
import { Instagram, AddAPhotoRounded } from '@mui/icons-material';



// отрисовываем логин
const UserName = ({ login }) => <span>{login}</span>
const CUserName = connect(state => ({ login: state.auth.payload?.sub?.login }))(UserName)

// отрисовывваем логин вариант 2
const UserName2 = ({ user }) =>
    <MenuItem key={1} >
        <Typography textAlign="center" onClick={() => console.log('click login')}>
            <span>{user.login}</span>
        </Typography>
    </MenuItem>

const CUserName2 = connect(state => ({ user: state.auth.payload?.sub }))(UserName2)



// ====================
function ResponsiveAppBar() {
    let history = useHistory()

    function goToMyAccount() {
        history.push('/user/63f8d0c273ca650acb9353f3');
    }

    const [anchorElUser, setAnchorElUser] = useState(null);

    const handleOpenUserMenu = (event) => {
        setAnchorElUser(event.currentTarget);
    };

    const handleCloseUserMenu = () => {
        setAnchorElUser(null);
    };

    return (
        <AppBar position='sticky' color='inherit'>
            <Container maxWidth="xl">
                <Toolbar disableGutters>
                    <IconButton edge='start'>
                        <Instagram sx={{
                            // display: { xs: 'flex' },
                            color: 'black'
                        }} />
                    </IconButton>

                    <Typography
                        variant="h6"
                        noWrap
                        component="a"
                        href="/feed"
                        sx={{
                            display: { xs: 'none', md: 'flex' },
                            fontFamily: 'monospace',
                            fontWeight: 700,
                            letterSpacing: '.3rem',
                            color: 'inherit',
                            textDecoration: 'none',
                            flexGrow: '1',
                            ml: 1
                        }}
                    >
                        Hipstagram
                    </Typography>

                    <IconButton>
                        <Link to='/createpost'>
                            <AddAPhotoRounded sx={{
                                display: { xs: 'flex' },
                                mr: 1,
                                // color: 'black'
                            }} />
                        </Link>
                    </IconButton>

                    <Box sx={{ flexGrow: 0 }}>
                        <Tooltip >
                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
                            </IconButton>
                        </Tooltip>
                        <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}
                        >
                            {/* <CUserName2 /> */}

                            <MenuItem key={1} onClick={goToMyAccount}>
                                <Typography textAlign="center">
                                    <CUserName />
                                </Typography>
                            </MenuItem>

                            <MenuItem key={2} onClick={() => console.log('click logout')}>
                                <Typography textAlign="center">
                                    <span>Выйти</span>
                                </Typography>
                            </MenuItem>
                        </Menu>
                    </Box>
                </Toolbar>
            </Container>
        </AppBar>
    )
}

export default ResponsiveAppBar;






// <Container>
//     <Link to="/createpost" style={{ textDecoration: 'none' }}>
//         <Button variant="contained" color='primary' startIcon={<AddAPhotoRoundedIcon />} onClick={() => (console.log('click add'))}>
//             Добавить пост
//         </Button>
//     </Link>
// </Container>