import * as React from 'react';
import {createElement, ReactNode} from 'react';
import {Dropdown, Menu,Icon} from 'union-design';
import "union-design/lib/dropdown/styles/css"

export interface DropdownButtonProps {
  disabled?:boolean;
  icon?:string;
  icon_fontsize?:number;
  overlay?:Menu;
  placement?:"bottomLeft"| "bottomCenter" |"bottomRight"| "topLeft" |"topCenter" |"topRight";
  size?:"small" | "large" | "default";
  trigger?:"click"|"hover"|"contextMenu";
  type?: "primary" | "dashed" | "danger" | "link" |"";
  visible?:boolean;
  onVisibleChange?:(visible: boolean) => void;
  onClick?:(event) => void;
  style?: object;
}

const DropdownButton: React.FC<DropdownButtonProps> = function DropdownButton({
                                                                                disabled,
                                                                                icon,
                                                                                icon_fontsize,
                                                                                overlay,
                                                                                placement="bottomRight",
                                                                                size="default",
                                                                                trigger="hover",
                                                                                type="default",
                                                                                visible,
                                                                                onVisibleChange,
                                                                                onClick,
                                                                                style = {},
                                                                                ...otherProps
                                                                           }) {
  const _style = style || {};
  const _otherProps = otherProps || {};
  _otherProps.style = _style;

  // var menuItem = [];
  // options.forEach(value => {
  //   console.log(value);
  //   if(value.type=="Item")
  //     menuItem.push(<Menu.Item key={value.key}>{value.menu_name}</Menu.Item>)
  //   else if(value.type=="SubMenu") menuItem.push( <Menu.SubMenu key={value.key}>{value.menu_name}</Menu.SubMenu>)
  //   else menuItem.push( <Menu.ItemGroup key={value.key}>{value.menu_name}</Menu.ItemGroup>)
  //   console.log("menuItem:",menuItem);
  // })

  return (
    <Dropdown.Button disabled={disabled} icon={<Icon style={{ fontSize: icon_fontsize }} type={icon} />} overlay={overlay} placement={placement} size={size} trigger={trigger}
                     type={type} onVisibleChange={onVisibleChange} onClick={onClick} { ..._otherProps } />
  );
};
export default DropdownButton;