import React from 'react';

export interface IDropdownMenuItemProps {
  active?: boolean;
  children: any;
  className?: string;
  eventKey?: string;
  href?: string;
  target?: string;
  onClick?(e: any): void;
  onSelect?(key: string): void;
  [x: string]: any;
}

export const DropdownMenuItem: React.FC<IDropdownMenuItemProps> = (props) => {
  const { active, children, className, eventKey, href = null, target = '_self', onClick, onSelect, ...otherProps } = props;
  const handleClick = (e: React.MouseEvent) => {
    if (onClick) {
      onClick(e);
    }
    if (onSelect) {
      onSelect(eventKey);
    }
  };

  function classNames(active: boolean, className: string): string {
    let classList = 'b-dropdown-menu-item';
    if (active) classList += ` active`;
    if (className) classList += ` ${className}`;
    return classList;
  }

  if (href) {
    return (
      <a href={href} target={target} className={classNames(active, className)} onClick={handleClick} {...otherProps}>
        {children}
      </a>
    );
  } else {
    return (
      <button type="button" className={classNames(active, className)} onClick={handleClick} {...otherProps}>
        {children}
      </button>
    );
  }
};