import React from 'react';
import { style } from 'app/styles';
import { ToggleButton } from 'app/components/ToggleButton';
import { Popup } from 'app/components/Popup';

export interface ActionMenuProps {
  // The children are the menu content
  children: string | JSX.Element | JSX.Element[];
  isMenuOpen: boolean;
  onMenuToggle: (evt) => void;
  style?: string | object;
}

const containerStyle = {
  overflow: 'visible',
  height: 16,
  width: 28,
};

const buttonStyle = {
  _extends: 'h2Text',
  height: 29,
  width: 14,
  margin: 0,
  padding: '0px 5px',
};

const buttonStyleMenuOpen = {
  _extends: buttonStyle,
  borderBottomRightRadius: '0px',
  borderBottomLeftRadius: '0px',
};

const menuStyle = {
  border: 'solid 2px @colors.selectable',
  borderTopRightRadius: '0px',
  marginRight: 0,
  minWidth: 180,
  right: '2px',
};

export const ActionMenu = (props: ActionMenuProps): JSX.Element => {
  {
    const { isMenuOpen, onMenuToggle } = props;
    const adjButtonStyle = isMenuOpen ? buttonStyleMenuOpen : buttonStyle;

    return (
      <div style={style(props.style, containerStyle)}>
        <ToggleButton
          isSelected={isMenuOpen}
          onClick={onMenuToggle}
          style={adjButtonStyle}
        >
          ...
        </ToggleButton>
        <Popup style={menuStyle} isOpen={isMenuOpen} onClose={onMenuToggle}>
          {props.children}
        </Popup>
      </div>
    );
  }
};

ActionMenu.displayName = 'ActionMenu';