import _ from "lodash";
import React from "react";
import {
  DropdownMenu as RMDDropdownMenu,
  FontIcon,
  MenuButton as RMDMenuButton
} from "react-md";
import { Cell, Grid } from "..";

/**
 * This component let's you set up a button that displays a menu list when clicked
 * @param {object} props The props
 * @returns {function} The component
 */
const MenuButton = props => {
  const pos = {
    BOTTOM_RIGHT: "br",
    BOTTOM_LEFT: "bl",
    TOP_RIGHT: "tr",
    TOP_LEFT: "tl"
  };
  const position = pos[props.position];
  return (
    <RMDMenuButton
      id={props.id}
      icon
      {..._.omit(props, ["icon"])}
      position={position}
      menuItems={props.children}
    >
      {props.icon}
    </RMDMenuButton>
  );
};

MenuButton.defaultProps = {
  icon: "none",
  position: "BOTTOM_LEFT",
  id: "menu"
};

const Menu = props => (
  <RMDDropdownMenu
    id="arrdropdown"
    menuItems={props.children}
    toggleQuery=".arrdropdown"
    position={props.position}
    onVisibilityChange={() => null}
    {...props}
  >
    <div style={props.style}>
      {props.label ? (
        <Grid justify="space-between">
          <Cell
            align="center"
            style={{
              padding: 9,
              textAlign: props.hasOwnProperty("style")
                ? props.style.textAlign
                : "left",
              width: "100%"
            }}
          >
            {props.label}
          </Cell>
          {props.icon ? (
            <Cell align="center" style={{ marginTop: 5 }}>
              <FontIcon className="arrdropdown">{props.icon}</FontIcon>
            </Cell>
          ) : null}
        </Grid>
      ) : (
        <FontIcon className="arrdropdown">{props.icon}</FontIcon>
      )}
    </div>
  </RMDDropdownMenu>
);

Menu.defaultProps = {
  icon: "keyboard_arrow_down",
  position: "below"
};

export default Menu;
export { MenuButton };