import React from 'react';
import Popover from 'material-ui/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import {DivWrapper} from './StyledWrapper';

class SimpleMenu extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            anchorEl: null,
        };
    }

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

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

    handleItemClick = (item) => {
        if(this.props.onItemClick)
            this.props.onItemClick(item);
        this.handleClose();
    }

    render() {
        const { anchorEl } = this.state;
        let menuItems = this.props.menuItems;
        let MenuItemComponent = this.props.menuItem?this.props.menuItem:null;
        let MenuAnchorComponent = this.props.menuAnchor?this.props.menuAnchor:null

        return (
            <DivWrapper className={this.props.wrapperClassName?this.props.wrapperClassName:null}>
                {
                    MenuAnchorComponent?
                        <MenuAnchorComponent
                            onClick={this.handleClick}
                            {...this.props}
                        />
                        :
                        <IconButton
                            aria-label="More"
                            aria-haspopup="true"
                            onClick={this.handleClick}
                        >
                            <i className="material-icons">
                                more_vert
                            </i>
                        </IconButton>
                }
                <Popover
                    open={Boolean(anchorEl)}
                    anchorEl={anchorEl}
                    anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
                    targetOrigin={{horizontal: 'left', vertical: 'top'}}
                    onRequestClose={this.handleClose}
                    className="popover"
                >
                    <Menu className="menu">
                        {
                            menuItems.map(item => {
                                return (
                                    MenuItemComponent?
                                        <MenuItemComponent
                                            {...this.props}
                                            item={item}
                                            onMenuClose={this.handleClose}
                                        />
                                        :
                                        <MenuItem
                                            onClick={() => {this.handleItemClick(item)}}
                                        >
                                            {item}
                                        </MenuItem>
                                )
                            })
                        }
                    </Menu>
                </Popover>
            </DivWrapper>
        );
    }
}

export default SimpleMenu;