import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';


const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  extendedIcon: {
    marginRight: theme.spacing.unit,
  },
});

class FloatingActionButton extends React.Component {
  state = {
    anchorEl: null,
  };

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

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

  render() {
    const { anchorEl } = this.state;
    const {
      classes, menuItems, transitToCreateUser, transitToCreatePatient
    } = this.props;
    const count = Object.keys(menuItems).length;
    let transformedMenuItems = null;

    if (count > 0) {
      transformedMenuItems = Object.keys(menuItems)
        .map(menuItemKey => (
          <MenuItem
            key={menuItemKey}
            onClick={() => transitToCreateUser(menuItems[menuItemKey].name)}
          >
            {menuItems[menuItemKey].name}
          </MenuItem>
        ));
      const patient = (
        <MenuItem
          key="patient"
          onClick={() => transitToCreatePatient()}
        >
          {'patient'}
        </MenuItem>
      );
      transformedMenuItems = transformedMenuItems.concat(patient);
    } else {
      transformedMenuItems = (
        <MenuItem>
Roles unavailable
        </MenuItem>
      );
    }

    return (
      <div>
        <Button
          variant="fab"
          color="primary"
          aria-label="Add"
          className={classes.button}
          aria-owns={anchorEl ? 'simple-menu' : null}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          <AddIcon />
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          {transformedMenuItems}
        </Menu>
      </div>
    );
  }
}

FloatingActionButton.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FloatingActionButton);