import React from 'react';
import Button from '../button';
import Icon from '../icon';
import Dropdown from './dropdown';
const ButtonGroup = Button.Group;
import classNames from 'classnames';
import splitObject from '../_util/splitObject';

export interface DropdownButtonProps {
  type?: 'primary' | 'ghost' | 'dash';
  onClick?: React.FormEventHandler<any>;
  trigger?: 'click' | 'hover';
  overlay: React.ReactNode;
  visible?: boolean;
  disabled?: boolean;
  onVisibleChange?: (visible: boolean) => void;
  style?: React.CSSProperties;
  prefixCls?: string;
  children: any;
}

export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
  static defaultProps = {
    align: {
      points: ['tr', 'br'],
      overlay: {
        adjustX: 1,
        adjustY: 1,
      },
      offset: [0, 4],
      targetOffset: [0, 0],
    },
    type: 'default',
    prefixCls: 'ant-dropdown-button',
  };

  render() {
    const [{ type, overlay, trigger, align, children, className, onClick, prefixCls,
      disabled, visible, onVisibleChange }, restProps] = splitObject(this.props,
       ['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick',
         'prefixCls', 'disabled', 'visible', 'onVisibleChange']);
    const cls = classNames(prefixCls, className);

    const dropdownProps = {
      align,
      overlay,
      trigger: disabled ? [] : trigger,
      onVisibleChange,
    };

    if ('visible' in this.props) {
      (dropdownProps as any).visible = visible;
    }

    return (
      <ButtonGroup {...restProps} className={cls}>
        <Button type={type} onClick={onClick} disabled={disabled}>{children}</Button>
        <Dropdown {...dropdownProps}>
          <Button type={type} disabled={disabled}>
            <Icon type="down" />
          </Button>
        </Dropdown>
      </ButtonGroup>
    );
  }
}