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

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

import { url } from '../../App';



function UserMenu({ login }) {
    let history = useHistory()
    const dispatch = useDispatch()

    const [anchorElUser, setAnchorElUser] = useState(null)

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

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

    function toMyAccount() {
        history.push(`/user/${login?._id}`)
    }

    function toCreatePost() {
        history.push('/createpost')
    }

    function toSearch() {
        history.push('/search')
    }

    return (
        <Stack
            direction='row'
        >
            <IconButton
                sx={{
                    color: '#000',
                    transform: 'scale(-1, 1)'
                }}
                onClick={toSearch}
            >
                <Search />
            </IconButton>

            <IconButton
                sx={{
                    color: '#000'
                }}
                onClick={toCreatePost}
            >
                <AddAPhotoRounded />
            </IconButton>

            <Box sx={{ flexGrow: 0 }}>
                <Tooltip>
                    <IconButton
                        onClick={handleOpenUserMenu}
                    >
                        <Avatar
                            alt={login?.login}
                            src={url.slice(0, -7) + login?.avatar?.url}
                        />
                    </IconButton>
                </Tooltip>

                <Menu
                    sx={{
                        mt: '50px'
                    }}
                    id="menu-appbar"
                    anchorEl={anchorElUser}
                    anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                    }}
                    keepMounted
                    transformOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                    }}
                    open={Boolean(anchorElUser)}
                    onClose={handleCloseUserMenu}
                >
                    <MenuItem
                        onClick={toMyAccount}
                    >
                        <Typography
                            textAlign="center">
                            <span>
                                {login?.login}
                            </span>
                        </Typography>
                    </MenuItem>

                    <MenuItem
                        onClick={() => { dispatch(actionFullLogout()) }}
                    >
                        <Typography
                            textAlign="center"
                        >
                            <span>
                                Выйти
                            </span>
                        </Typography>
                    </MenuItem>
                </Menu>
            </Box>
        </Stack>
    )
}

function Header({ login }) {
    let history = useHistory()

    function toMain() {
        history.push('/');
    }

    return (
        <AppBar
            position='sticky'
            color='inherit'
        >
            <Container
                maxWidth="xl"
            >
                <Toolbar
                    disableGutters
                >
                    <Stack
                        direction='row'
                        sx={{
                            display: 'flex',
                            flexGrow: '1'
                        }}
                    >
                        <IconButton
                            edge='start'
                            sx={{
                                color: '#000'
                            }}
                            onClick={toMain}
                        >
                            <Instagram />

                            <Typography
                                variant="h6"
                                sx={{
                                    fontFamily: 'monospace',
                                    fontWeight: 700,
                                    letterSpacing: '.3rem',
                                    ml: 1
                                }}
                            >
                                Hipstagram
                            </Typography>
                        </IconButton>
                    </Stack>

                    {login && <UserMenu login={login} />}

                </Toolbar>
            </Container>
        </AppBar>
    )
}

export const CHeader = connect(state => ({ login: state?.promise?.AboutMe?.payload }))(Header)