// CreateUserForm Component
import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types';

// Material Components
import MenuItem from '@material-ui/core/MenuItem';
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import MoreVert from '@material-ui/icons/MoreVert';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';

const styles = theme => ({
  title: {
  },
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  }
});

class MoreVertical extends Component {
 state = {
   anchorEl: null,
 };


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

  handleCloseWithDelete = index => () => {
    const { fields } = this.props;
    this.setState({ anchorEl: null });
    fields.remove(index);
  };

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

  renderMenuItem =items => (
    items.map(item => (
      <MenuItem key={item.text} onClick={this.handleCloseWithDelete(item.index)}>
        {item.text}
      </MenuItem>
    ))
  )

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

    return (
      <Fragment>
        <IconButton
          aria-owns={open ? 'menu-appbar' : null}
          aria-haspopup="true"
          onClick={this.handleMenu}
          color="inherit"
        >
          <MoreVert />
        </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>
      </Fragment>
    );
  }
}


MoreVertical.propTypes = {
};


MoreVertical.defaultProps = {
};

export default withStyles(styles)(MoreVertical);