import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import SearchButton from '@material-ui/icons/Search';
import { withStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import Avatar from '@material-ui/core/Avatar';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import { Typography } from '@material-ui/core';


const styles = theme => ({
  flex: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing.unit * 2
  },
  avatar: {
    margin: `0 ${theme.spacing.unit}`,
    color: 'black',
    backgroundColor: 'white'
  },
  searchButton: {
    color: 'white'
  }
});
class Header extends React.Component {
  state = {
    anchorEl: null,
  };


  handleMenu = (event) => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  renderMenuItem =items => (
    items.map(i => (
      <MenuItem key={i} onClick={this.handleClose}>
        {i}
      </MenuItem>
    ))
  )

  render() {
    const { anchorEl } = this.state;
    const {
      title, menuItems, initials, classes
    } = this.props;
    const open = Boolean(anchorEl);

    return (
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            {title}
          </Typography>
          <div>
            <IconButton className={classes.searchButton}>
              <SearchButton />
            </IconButton>

            <IconButton
              aria-owns={open ? 'menu-appbar' : null}
              aria-haspopup="true"
              onClick={this.handleMenu}
              color="inherit"
            >
              <Avatar className={classes.avatar}>
                {initials}
              </Avatar>
            </IconButton>
            <Menu
              id="menu-appbar"
              anchorEl={anchorEl}
              anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              open={open}
              onClose={this.handleClose}
            >
              {this.renderMenuItem(menuItems)}
            </Menu>
          </div>
        </Toolbar>
      </AppBar>
    );
  }
}

Header.propTypes = {
  title: PropTypes.string,
  menuItems: PropTypes.arrayOf(PropTypes.string),
  initials: PropTypes.string
};

Header.defaultProps = {
  title: 'Header',
  menuItems: ['Profile', 'Logout'],
  initials: 'A'
};

export default withStyles(styles)(Header);