import React from 'react';

export type ButtonVariants =
  | 'primary'
  | 'secondary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
  | 'light'
  | 'link'
  | 'outline-primary'
  | 'outline-secondary'
  | 'outline-info'
  | 'outline-success'
  | 'outline-warning'
  | 'outline-danger'
  | 'outline-light';

export type ButtonSize = 'xs' | 'sm' | 'lg' | any;

export interface IButton extends React.HTMLProps<any> {
  className?: string;
  disabled?: boolean;
  round?: boolean;
  id?: string;
  href?: string;
  size?: ButtonSize;
  style?: React.CSSProperties;
  tabIndex?: number;
  target?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: ButtonVariants;
  onClick?(e: any): void;
  [x: string]: any;
}

export type RefElements = HTMLButtonElement & HTMLAnchorElement;

export const Button = React.forwardRef<RefElements, IButton>((props, ref) => {
  const { className = '', disabled = false, href, id, size = '', style, target, tabIndex, type = 'button', round = false, variant = 'primary', onClick, ...otherProps } = props;

  const classNames = () => {
    let classList = `b-button`;
    if (size) classList += ` ${size}`;
    if (variant) classList += ` ${variant}`;
    if (round) classList += ` round`;
    if (className) classList += ` ${className}`;
    return classList;
  };

  if (href) {
    return (
      <a ref={ref} href={href} id={id} className={classNames()} onClick={onClick} target={target} tabIndex={tabIndex} style={style} {...otherProps}>
        {props.children}
      </a>
    );
  } else {
    return (
      <button ref={ref} id={id} type={type} className={classNames()} onClick={onClick} tabIndex={tabIndex} disabled={disabled} style={style} {...otherProps}>
        {props.children}
      </button>
    );
  }
});