import React, { useCallback } from 'react';

import { withRouter, RouteComponentProps } from 'react-router';
import { AppBar, IconButton, Typography, Menu, MenuItem } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import ExitIcon from '@material-ui/icons/ExitToApp';
import { Link } from 'react-router-dom';
import { Toolbar } from './Nav.styles';

interface Props {
    onLogout: () => void;
}

function Nav({ history }: RouteComponentProps & Props) {  //{history, onLogout}
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    /*
    const handleLogout = useCallback(() => {
        onLogout();
        history.push('/');
    }, [onLogout]);
*/
    const handleMenuOpen = useCallback(
        (event: React.MouseEvent<HTMLButtonElement>) =>
            setAnchorEl(event.currentTarget),
        [setAnchorEl]
    );

    const handleMenuClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);

    return (
        <AppBar>
            <Toolbar>
                <IconButton
                    edge="start"
                    color="inherit"
                    aria-label="Menu"
                    onClick={handleMenuOpen}
                >           
                    <MenuIcon />
                </IconButton>
                <Typography variant="h6">
                    Einkaufszettel
                </Typography>
                <Menu
                    id="navigation-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleMenuClose}
                >   
                    <MenuItem onClick={handleMenuClose}>
                        <Link to="/zettel">Zettel</Link>
                    </MenuItem>
                    <MenuItem onClick={handleMenuClose}>
                        <Link to="/hinzufügen">Hinzufügen</Link>
                    </MenuItem>

                </Menu>
            </Toolbar>
    </AppBar>
    );

}

export default withRouter(Nav);